.home-hero {
  position: relative;
  padding: 0.625rem;
  height: 30rem;
  @media (min-width: 768px) {
    padding: 1.25rem;
    height: 45rem;
  }
  @media (min-width: 1024px) {
    height: 50rem;
  }
  @media (min-width: 1200px) {
    height: clamp(55rem, 100dvh, 60rem);
  }
  & .home-hero__content {
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 0.25rem solid var(--dark-red);
    padding: 9rem 0.625rem 0;
    @media (min-width: 768px) {
      padding: 10rem 2.5rem 0;
    }
    @media (min-width: 1024px) {
      padding-inline: 3.75rem;
    }
    @media (min-width: 1200px) {
      padding: 12.5rem 5rem 0;
    }
  }
  & .home-hero__title {
    width: 100%;
    max-width: 85rem;
    margin-inline: auto;
    --shadow-color: #000000;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    filter: drop-shadow(0 16px 48px hsl(from var(--shadow-color) h s l / 0.12))
            drop-shadow(0 8px 24px hsl(from var(--shadow-color) h s l / 0.08))
            drop-shadow(0 4px 12px hsl(from var(--shadow-color) h s l / 0.04))
            drop-shadow(0 2px 6px hsl(from var(--shadow-color) h s l / 0.02));
    & > img {
      width: 100%;
      max-width: 62.5rem;
    }
    & h1 {
      color: var(--red);
      line-height: 1.25;
      font-weight: 900;
      font-size: 1.125rem;
    }
    @media (min-width: 768px) {
      gap: 0.75rem;
      & h1 {
        font-size: 2rem;
      }
    }
    @media (min-width: 1024px) {
      gap: 0.875rem;
      & h1 {
        font-size: 2.5rem;
      }
    }
    @media (min-width: 1200px) {
      gap: 1rem;
      & h1 {
        font-size: 3rem;
      }
    }
  }
  
  & .swiper {
    overflow: visible;
    width: 115%;
    position: absolute;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    & .swiper-wrapper {
      transition-timing-function: linear;
      filter: drop-shadow(0 16px 48px hsl(from var(--shadow-color) h s l / 0.12))
              drop-shadow(0 8px 24px hsl(from var(--shadow-color) h s l / 0.08))
              drop-shadow(0 4px 12px hsl(from var(--shadow-color) h s l / 0.04))
              drop-shadow(0 2px 6px hsl(from var(--shadow-color) h s l / 0.02));
    }
    & .swiper-slide {
      & img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 3 / 2;
      }
    }
    &:not(.swiper-initialized) {
      transform: none;
      left: 0;
      & .swiper-slide {
        min-width: 25%;
      }
    }
  }
}

.home-intro-images {
  margin-top: -2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.5rem;
  & img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 2px solid var(--snow);
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.02), 0 4px 12px 2px rgba(0, 0, 0, 0.04), 0 8px 24px 4px rgba(0, 0, 0, 0.08), 0 16px 48px 8px rgba(0, 0, 0, 0.12);
    &:first-child {
      margin-top: 3.75rem;
    }
    &:last-child {
      align-self: start;
    }
  }
  @media (min-width: 768px) {
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    gap: 2rem;
    & img {
      &:first-child {
        margin-top: 8rem;
      }
    }
  }
  @media (min-width: 1200px) {
    gap: 3rem;
    & img {
      &:first-child {
        margin-top: 12.5rem;
      }
    }
  }
}

.home-recruit-slider {
  overflow: visible;
  width: 115%;
  position: absolute;
  left: 50%;
  & .swiper-wrapper {
    transition-timing-function: linear;
    filter: drop-shadow(0 16px 48px hsl(from var(--shadow-color) h s l / 0.12))
      drop-shadow(0 8px 24px hsl(from var(--shadow-color) h s l / 0.08))
      drop-shadow(0 4px 12px hsl(from var(--shadow-color) h s l / 0.04))
      drop-shadow(0 2px 6px hsl(from var(--shadow-color) h s l / 0.02));
  }
  & .swiper-slide {
    & img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 3 / 2;
    }
  }
  &:not(.swiper-initialized) {
    transform: none;
    left: 0;
    & .swiper-slide {
      min-width: 25%;
    }
  }
  
  &.home-recruit-slider--top {
    top: -2rem;
    transform: translateX(-50%) rotate(7deg);
  }
  &.home-recruit-slider--bottom {
    bottom: -2rem;
    transform: translateX(-50%) rotate(-4deg);
  }
}

.insta-list {
  width: 100%;
  background-color: var(--red);
  padding-block: 0.25rem;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .webgene-no-items {
    background-color: var(--snow);
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}