:root {
  --header-height: 6.7rem;
}
@media (width > 768px) {
  :root {
    --header-height: 11.2rem;
  }
}

.grid-line-container {
  position: relative;
}

.grid-line {
  position: absolute;
  background-color: var(--white-main);
}
@media (width > 768px) {
  .grid-line {
    background-color: var(--transparent-bgc);
  }
}
.grid-line.white {
  background-color: var(--white-main);
}
.grid-line.black {
  background-color: var(--black-main, #333032);
}
.grid-line.transparent:not(.black):not(.white) {
  background-color: rgba(255, 255, 255, 0.2);
}
.grid-line.black.transparent {
  background-color: rgba(51, 48, 50, 0.2) !important;
}
@media (width > 768px) {
  .grid-line.black.transparent {
    background-color: rgba(51, 48, 50, 0.2) !important;
  }
}
.grid-line.white.transparent {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
@media (width > 768px) {
  .grid-line.white.transparent {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
}
.grid-line.fixed {
  position: fixed;
}
.grid-line.left {
  top: 0;
  left: 0;
}
[lang=en] .grid-line.left {
  right: 0;
  left: auto;
}
.grid-line.left {
  width: 1px;
  height: 100%;
}
.grid-line.left.one-seven {
  left: 14.2857%;
}
[lang=en] .grid-line.left.one-seven {
  right: 14.2857%;
  left: auto;
}
.grid-line.left.one-six {
  left: 16.667%;
}
[lang=en] .grid-line.left.one-six {
  right: 16.667%;
  left: auto;
}
.grid-line.left.two-seven {
  left: 28.5714%;
}
[lang=en] .grid-line.left.two-seven {
  right: 28.5714%;
  left: auto;
}
.grid-line.left.one-three {
  left: 33.333%;
}
[lang=en] .grid-line.left.one-three {
  right: 33.333%;
  left: auto;
}
.grid-line.left.three-seven {
  left: 42.857%;
}
[lang=en] .grid-line.left.three-seven {
  right: 42.857%;
  left: auto;
}
.grid-line.left.one-two {
  left: 50%;
}
[lang=en] .grid-line.left.one-two {
  right: 50%;
  left: auto;
}
.grid-line.left.two-three {
  left: 66.667%;
}
[lang=en] .grid-line.left.two-three {
  right: 66.667%;
  left: auto;
}
.grid-line.left.five-six {
  left: 83.333%;
}
[lang=en] .grid-line.left.five-six {
  right: 83.333%;
  left: auto;
}
.grid-line.right {
  top: 0;
  right: 0;
}
[lang=en] .grid-line.right {
  left: 0;
  right: auto;
}
.grid-line.right {
  width: 1px;
  height: 100%;
}
.grid-line.right.one-seven {
  right: 14.2857%;
}
[lang=en] .grid-line.right.one-seven {
  left: 14.2857%;
  right: auto;
}
.grid-line.right.one-six {
  right: 16.667%;
}
[lang=en] .grid-line.right.one-six {
  left: 16.667%;
  right: auto;
}
.grid-line.right.two-seven {
  right: 28.5714%;
}
[lang=en] .grid-line.right.two-seven {
  left: 28.5714%;
  right: auto;
}
.grid-line.right.one-three {
  right: 33.333%;
}
[lang=en] .grid-line.right.one-three {
  left: 33.333%;
  right: auto;
}
.grid-line.right.three-seven {
  right: 42.857%;
}
[lang=en] .grid-line.right.three-seven {
  left: 42.857%;
  right: auto;
}
.grid-line.right.one-two {
  right: 50%;
}
[lang=en] .grid-line.right.one-two {
  left: 50%;
  right: auto;
}
.grid-line.right.two-three {
  right: 66.667%;
}
[lang=en] .grid-line.right.two-three {
  left: 66.667%;
  right: auto;
}
.grid-line.right.five-six {
  right: 83.333%;
}
[lang=en] .grid-line.right.five-six {
  left: 83.333%;
  right: auto;
}
.grid-line.top {
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
}
.grid-line.top.one-six {
  top: 16.667%;
}
.grid-line.top.one-four {
  top: 25%;
}
.grid-line.top.one-three {
  top: 33.333%;
}
.grid-line.top.one-two {
  top: 50%;
}
.grid-line.top.two-three {
  top: 66.666%;
}
.grid-line.top.three-four {
  top: 75%;
}
.grid-line.bottom {
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
}

.image-gallery {
  padding: 4rem 0;
  background-color: var(--white-main);
}
.image-gallery .gallery-title {
  font-family: "Simpler", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--red-main);
  margin: 0 3.6rem 2.4rem;
}
@media (width > 768px) {
  .image-gallery .gallery-title {
    font-size: 3.5rem;
    max-width: 25rem;
    margin-right: 3rem;
    padding-bottom: 0;
  }
}
.image-gallery {
  /* --------------------------
        DESKTOP GRID LAYOUT
     -------------------------- */
}
.image-gallery .gallery-grid {
  position: relative;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 10rem;
  min-height: 60rem;
}
@media (width > 1440px) {
  .image-gallery .gallery-grid {
    min-height: 80rem;
  }
}
.image-gallery .gallery-grid .gallery-page {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto auto;
  gap: 1.2rem;
}
.image-gallery .gallery-grid .gallery-page.active {
  display: grid;
}
.image-gallery .gallery-grid .gallery-page .gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.image-gallery .gallery-grid .gallery-page .gallery-item:hover {
  transform: scale(1.02);
  z-index: 1;
}
.image-gallery .gallery-grid .gallery-page .gallery-item img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin-right: 0;
  z-index: 0;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-0 {
  grid-column: 1/4;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-0 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-0 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-0 .grid-line-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-0 .grid-blur-item-2 {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 50%;
  height: calc(50% - 1.2rem);
  background: var(--White-Grid, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(20px);
  z-index: 2;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 {
  grid-column: 4/11;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-line-vertical {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-line-vertical.v1 {
  left: 20%;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-line-vertical.v2 {
  left: 40%;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-line-vertical.v3 {
  left: 60%;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-line-vertical.v4 {
  left: 80%;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20%;
  height: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1.1rem;
  z-index: 2;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item .hue-grid-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  color: white;
  width: 100%;
  max-width: 5rem;
}
@media (width > 768px) {
  .image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item .hue-grid-text {
    max-width: 6.9rem;
  }
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item .hue-grid-text .hue-name-line {
  font-family: Nexa, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  letter-spacing: 0.06em;
  color: white;
  text-align: left;
}
@media (width > 768px) {
  .image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item .hue-grid-text .hue-name-line {
    font-size: 1.7rem;
  }
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item .hue-grid-text .hue-code-line {
  font-family: Nexa, Simpler;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  color: white;
  text-align: left;
}
@media (width > 768px) {
  .image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-hue-item .hue-grid-text .hue-code-line {
    font-size: 1.4rem;
  }
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-1 .grid-blur-item-2 {
  position: absolute;
  bottom: 50%;
  left: 20%;
  width: 20%;
  height: calc(50% - 1.2rem);
  background: var(--White-Grid, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(20px);
  z-index: 2;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-2 {
  grid-column: 1/4;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-2 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-2 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-2 .grid-line-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-2 .grid-blur-item-2 {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 50%;
  height: calc(50% - 1.2rem);
  background: var(--White-Grid, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(20px);
  z-index: 2;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-3 {
  grid-column: 4/7;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-3 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-3 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-3 .grid-line-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-3 .grid-blur-item-2 {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 50%;
  height: calc(50% - 1.2rem);
  background: var(--White-Grid, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(20px);
  z-index: 2;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 {
  grid-column: 7/11;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 .grid-line-vertical {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 .grid-line-vertical.v1 {
  left: 33.3333333333%;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 .grid-line-vertical.v2 {
  left: 66.6666666667%;
}
.image-gallery .gallery-grid .gallery-page .gallery-item.item-4 .grid-blur-item-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33.3333333333%;
  height: 50%;
  background: var(--White-Grid, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(20px);
  z-index: 2;
}
.image-gallery {
  /* --------------------------
        MOBILE SWIPER & GRID
     -------------------------- */
}
.image-gallery .gallery-swiper-container {
  position: relative;
  width: 100%;
  margin: 0 0 2.4rem;
  overflow: hidden;
}
.image-gallery .gallery-swiper-container .swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}
.image-gallery .gallery-swiper-container .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}
.image-gallery .gallery-grid-mobile {
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  position: relative;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 1.2rem;
}
.image-gallery .gallery-grid-mobile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 66.666%;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  pointer-events: none;
}
.image-gallery .gallery-grid-mobile .gallery-item {
  position: relative;
  overflow: hidden;
}
.image-gallery .gallery-grid-mobile .gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 {
  grid-column: 1/3;
  max-width: 100%;
  height: 25.3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 0;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  left: 33.3333333333%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  left: 66.6666666667%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 .grid-hue-item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33.3333333333%;
  height: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1.1rem;
  z-index: 2;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 .grid-hue-item .hue-grid-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  color: white;
  width: 100%;
  max-width: 5rem;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 .grid-hue-item .hue-grid-text .hue-name-line {
  font-family: Nexa, Simpler;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  letter-spacing: 0.06em;
  color: white;
  text-align: left;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 .grid-hue-item .hue-grid-text .hue-code-line {
  font-family: Nexa, Simpler;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  color: white;
  text-align: left;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-0 .grid-blur-item-2 {
  position: absolute;
  top: 0;
  right: 33.3333333333%;
  width: 33.3333333333%;
  height: 50%;
  background: var(--White-Grid, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(20px);
  z-index: 1;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-1 {
  grid-column: 1/2;
  height: 25.3rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-1 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 0;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-1 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-2 {
  grid-column: 2/3;
  height: 25.3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  position: relative;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-2 img {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 0;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-2::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery .gallery-grid-mobile .gallery-item.item-2 .grid-line-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
.image-gallery {
  /* --------------------------
        PAGINATION DOTS
     -------------------------- */
}
.image-gallery .gallery-pagination {
  display: flex;
  gap: 1.1rem;
  margin-top: 2.4rem;
  padding: 0 3.6rem;
}
.image-gallery .gallery-pagination .pagination-dot {
  width: 1.6rem;
  height: 0.1rem;
  border: none;
  background-color: var(--red-30, rgba(219, 0, 50, 0.3));
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  border-radius: 0;
}
.image-gallery .gallery-pagination .pagination-dot.active {
  background-color: var(--red-main);
  height: 0.3rem;
}
.image-gallery .gallery-pagination .pagination-dot:hover {
  background-color: var(--red-main);
  opacity: 0.8;
  height: 0.3rem;
}
.image-gallery .gallery-pagination .pagination-dot:focus {
  outline: 2px solid var(--red-main);
  outline-offset: 2px;
}
@media (width > 768px) {
  .image-gallery {
    padding: 14.3rem 0;
  }
}