.hero-gallery {
  position: relative;
  padding: 0 2rem;
}

/* .hero-gallery__gradient {
  position: absolute;
  top: 50%;
  right: -220px;
  transform: translateY(-50%);
  width: 949px;
  height: 949px;
  border-radius: 949px;
  background: linear-gradient(180deg, rgba(0, 233, 228, 0.12) 0%, rgba(160, 79, 244, 0.24) 100%);
  filter: blur(100px);
} */

.hero-gallery__inner {
  position: relative;
}

.hero-gallery__layer {
  display: none;
}

.hero-gallery__main-image {
  position: relative;
  aspect-ratio: 12 / 5;
  width: 100%;
  margin: 0 auto 2rem;
  border-radius: 1rem;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .hero-gallery__main-image {
    aspect-ratio: 1;
  }
}

.hero-gallery__main-image img,
.hero-gallery__main-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@supports (grid-template-columns: subgrid) {
  @keyframes fade {
    0%,
    55% {
      opacity: 0;
    }
  }

  @keyframes reveal {
    0%,
    30% {
      scale: 0;
    }
  }

  @keyframes scale-x {
    0%,
    10% {
      width: calc(100vw - (2 * var(--gutter)));
    }
  }

  @keyframes scale-y-mobile {
    0%,
    10% {
      height: 75vh;
    }
  }

  @keyframes scale-y-desktop {
    0%,
    10% {
      height: calc(100vh - (2 * var(--gutter)));
    }
  }

  .hero-gallery {
    --gap: clamp(10px, 7.35vw, 80px);
    --gutter: 2rem;
    --power-1-out: linear(
      0 0%,
      0.0027 3.64%,
      0.0106 7.29%,
      0.0425 14.58%,
      0.0957 21.87%,
      0.1701 29.16%,
      0.2477 35.19%,
      0.3401 41.23%,
      0.5982 55.18%,
      0.7044 61.56%,
      0.7987 68.28%,
      0.875 75%,
      0.9297 81.25%,
      0.9687 87.5%,
      0.9922 93.75%,
      1 100%
    );
    --power-2-out: linear(
      0 0%,
      0.0036 9.62%,
      0.0185 16.66%,
      0.0489 23.03%,
      0.0962 28.86%,
      0.1705 34.93%,
      0.269 40.66%,
      0.3867 45.89%,
      0.5833 52.95%,
      0.683 57.05%,
      0.7829 62.14%,
      0.8621 67.46%,
      0.8991 70.68%,
      0.9299 74.03%,
      0.9545 77.52%,
      0.9735 81.21%,
      0.9865 85%,
      0.9949 89.15%,
      1 100%
    );
    --power-3-out: linear(
      0 0%,
      0.0029 13.8%,
      0.0184 21.9%,
      0.0339 25.51%,
      0.0551 28.81%,
      0.0827 31.88%,
      0.1168 34.76%,
      0.1962 39.57%,
      0.3005 44.02%,
      0.4084 47.53%,
      0.6242 53.45%,
      0.7493 57.93%,
      0.8495 62.97%,
      0.8888 65.67%,
      0.9213 68.51%,
      0.9629 73.9%,
      0.9876 80.16%,
      0.998 87.5%,
      1 100%
    );
    --power-4-out: linear(
      0 0%,
      0.0012 14.95%,
      0.0089 22.36%,
      0.0297 28.43%,
      0.0668 33.43%,
      0.0979 36.08%,
      0.1363 38.55%,
      0.2373 43.07%,
      0.3675 47.01%,
      0.5984 52.15%,
      0.7121 55.23%,
      0.8192 59.21%,
      0.898 63.62%,
      0.9297 66.23%,
      0.9546 69.06%,
      0.9733 72.17%,
      0.9864 75.67%,
      0.9982 83.73%,
      1 100%
    );
    --sine: linear(
      0 0%,
      0.2861 18.47%,
      0.4829 32.08%,
      0.6437 44.52%,
      0.7712 56.07%,
      0.8722 67.47%,
      0.9115 73.02%,
      0.9434 78.49%,
      0.9682 83.91%,
      0.9859 89.3%,
      0.9965 94.66%,
      1 100%
    );

    padding: 0;
    max-width: 100%;
  }

  @media (max-width: 600px) {
    .hero-gallery {
      --gutter: 1rem;
    }
  }

  .hero-gallery__inner {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    place-items: center;
    align-content: center;
    position: sticky;
    top: 0;
    overflow: hidden;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-gallery {
      min-height: 240vh;
    }
  }

  .hero-gallery__main-image {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
    overflow: visible;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .hero-gallery__main-image img,
  .hero-gallery__main-image video {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    object-fit: cover;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .hero-gallery__grid {
    --offset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--gap);
    width: 1600px;
    max-width: calc(100% - (2 * var(--gutter)));
    margin: 0 auto;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  @media (min-width: 1024px) {
    .hero-gallery__grid {
      padding-top: 30px;
    }
  }

  @media (max-width: 600px) {
    .hero-gallery__grid {
      grid-template-columns: repeat(3, 1fr);
      --offset: -1;
    }

    .hero-gallery__grid > div:nth-of-type(1) {
      display: none;
    }
  }

  .hero-gallery__grid > .hero-gallery__layer {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    pointer-events: none;
  }

  .hero-gallery__grid > div:nth-of-type(1) a:nth-of-type(odd) {
    grid-column: 1;
  }
  .hero-gallery__grid > div:nth-of-type(1) a:nth-of-type(even) {
    grid-column: -2;
  }

  .hero-gallery__grid > div:nth-of-type(2) a:nth-of-type(odd) {
    grid-column: calc(2 + var(--offset));
  }
  .hero-gallery__grid > div:nth-of-type(2) a:nth-of-type(even) {
    grid-column: calc(-3 - var(--offset));
  }

  .hero-gallery__grid > div:nth-of-type(3) a {
    grid-column: calc(3 + var(--offset));
  }

  .hero-gallery__grid > div:nth-of-type(3) a:last-of-type {
    grid-row: -1;
  }

  .hero-gallery__grid .hero-gallery__main-image {
    position: relative;
    grid-area: 2 / calc(3 + var(--offset));
  }

  .hero-gallery__grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1rem;
  }
}

@supports (grid-template-columns: subgrid) and (animation-timeline: scroll()) and (animation-range: 0 100%) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-gallery {
      view-timeline: --runner;
    }

    .hero-gallery__main-image img,
    .hero-gallery__main-image video {
      animation-name: scale-x, scale-y-mobile;
      animation-fill-mode: both;
      animation-timing-function: var(--power-2-out), var(--power-1-out);
      animation-timeline: --runner, --runner;
      animation-range: entry 100% exit -20%;
    }

    @media (min-width: 1024px) {
      .hero-gallery__main-image img,
      .hero-gallery__main-image video {
        animation-name: scale-x, scale-y-desktop;
      }
    }

    .hero-gallery__grid .hero-gallery__layer {
      animation-name: fade, reveal;
      animation-fill-mode: both;
      animation-timeline: --runner, --runner;
      animation-timing-function: var(--sine), var(--power-1-out);
      animation-range: entry 100% exit 0%;
    }

    .hero-gallery__grid .hero-gallery__layer:nth-of-type(1) {
      animation-range: entry 100% exit 0%;
    }

    .hero-gallery__grid .hero-gallery__layer:nth-of-type(2) {
      animation-range: entry 100% exit -10%;
    }

    .hero-gallery__grid .hero-gallery__layer:nth-of-type(3) {
      animation-range: entry 100% exit -20%;
    }
  }
}

.hero-gallery__item {
  display: block;
  position: relative;
  pointer-events: auto;
  overflow: hidden;
}

.hero-gallery__item-hover {
  position: absolute;
  inset: 0;
  padding: 1.25rem;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.hero-gallery__item:hover .hero-gallery__item-hover {
  opacity: 1;
  visibility: visible;
}

.hero-gallery__item-content {
  display: flex;
  align-items: flex-end;
  width: 100%;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.hero-gallery__item:hover .hero-gallery__item-content {
  transform: translateY(0);
}

.hero-gallery__item-content p {
  flex: 1;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: white;
}

.hero-gallery__item-content svg {
  flex-shrink: 0;
}