@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"');
:root {
  --color-primary: #ffda79;
  --color-yuppie: teal;
  --color-supreme: deeppink;
  --color-classic: tomato;
  --color-dark: #1f2937;
  --color-medium-light: #eeeeee;
  --color-light: #fff;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --font-base: Lato, sans-serif;
  --font-title: "Playfair Display", serif;
}

/**,*/
/**::before,*/
/**::after {*/
/*  box-sizing: border-box;*/
/*  line-height: 1.6;*/
/*}*/

/*body {*/
/*  background-color: var(--color-medium-light);*/
/*}*/

.c-gallery {
  max-width: 1360px;
  margin: auto;
  display: grid;
  gap: 40px;
  padding: 40px 20px 80px;
  font-family: var(--font-base);
  color: var(--color-dark);
}

.c-gallery .c-gallery__item {
  display: block;
}
.c-gallery__title {
  font-size: 64px;
  font-family: var(--font-title);
  text-align: center;
}
.c-gallery__filter {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  height: 60px;
  margin: 0 auto;
  padding: 12px 16px;
  text-transform: uppercase;
  background-color: var(--color-light);
  box-shadow: var(--shadow);
  border-radius: 99px;
}
.c-gallery__filter-option {
  height: 100%;
  cursor: pointer;
}
.c-gallery__filter-option span {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  border-radius: 99px;
}
.c-gallery__filter-option input[type=radio] {
  display: none;
}
.c-gallery__filter-option input[type=radio]:checked + span {
  background: var(--color-primary);
}
.c-gallery__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.c-gallery__item {
  position: relative;
  width: 100%;
  height: 400px;
  box-shadow: var(--shadow);
  border-radius: 16px 42px;
  overflow: hidden;
}
.c-gallery__item:has([data-category=classic]) {
  --color-category: var(--color-classic);
}
.c-gallery__item:has([data-category=supreme]) {
  --color-category: var(--color-supreme);
}
.c-gallery__item:has([data-category=yuppie]) {
  --color-category: var(--color-yuppie);
}
.c-gallery__item-category {
  display: grid;
  place-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 80px;
  height: 80px;
  border-radius: 160px;
  color: var(--color-light);
  text-transform: uppercase;
  background: var(--color-category);
  z-index: 1;
}



.c-gallery__item-category::after {
  content: attr(data-category);
}
.c-gallery__item-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-gallery__item-name {
  display: grid;
  place-items: center;
  position: absolute;
  top: 70px;
  /* right: 10px; */
  width: 80px;
  height: 80px;
  color: black;
  background: white;
  z-index: 1000;
}