.home-hero {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: auto;
  min-height: calc(var(--vh, 1vh) * 100);
  padding-top: 12.5rem;
  position: relative;
  overflow: hidden;
  
  & .home-hero__slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: hsl(0 0 0 / 20%);
      pointer-events: none;
    }
    & img {
      position: relative;
      object-fit: cover;
      width: 100%;
    }
    & * {
      height: 100%;
    }
  }
  
  & .home-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    color: var(--snow);
    line-height: 1.25;
    letter-spacing: 0.12em;
    font-weight: 500;
    text-align: center;
    flex: 1 1 0%;
    z-index: 1;

    & .home-hero__title-main {
      font-size: 1.875rem;
    }
    
    & .home-hero__title-sub {
      font-size: 0.875rem;
    }
    
    @media screen and (min-width: 768px) {
      padding-right: 2.5rem;
      padding-left: 2.5rem;
      & .home-hero__title-main {
        font-size: 3rem;
      }

      & .home-hero__title-sub {
        font-size: 1.25rem;
      }
    }
    @media screen and (min-width: 1024px) {
      padding-right: 5rem;
      padding-left: 5rem;
      & .home-hero__title-main {
        font-size: 4rem;
      }

      & .home-hero__title-sub {
        font-size: 1.5rem;
      }
    }
    @media screen and (min-width: 1200px) {
      padding-right: 7.5rem;
      padding-left: 7.5rem;
    }
  }
}

.swiper.home-gallery {
  width: 100%;
  overflow: visible;
  & img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
  }
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}

.products-grid-wrapper {
  @media screen and (min-width: 1024px) {
    height: 37.5rem;
  }
}
.home-products-images {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 25rem;
  @media screen and (min-width: 768px) {
    height: 34rem;
  }
  @media screen and (min-width: 1024px) {
    height: 100%;
  }
  
  & .home-products-image {
    object-fit: cover;
    height: 100%;
    width: 100%;
    &.home-products-image--1 {
      grid-column: 2 / span 6;
      grid-row: 1;
    }
    &.home-products-image--2 {
      grid-column: 1 / span 6;
      grid-row: 2;
    }
    &.home-products-image--3 {
      grid-column: 3 / span 5;
      grid-row: 3;
    }
  }
}
.about-us-grid-wrapper {
  @media screen and (min-width: 1200px) {
    height: auto;
    width: 33.75%;
  }
}
.home-about-us-images {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 25rem;
  @media screen and (min-width: 768px) {
    height: 34rem;
  }
  @media screen and (min-width: 1024px) {
    height: 37.5rem;
  }
  @media screen and (min-width: 1200px) {
    height: 100%;
    width: 100%;
  }
  
  & .home-about-us-image {
    object-fit: cover;
    height: 100%;
    width: 100%;
    &.home-about-us-image--1 {
      grid-column: 1 / span 5;
      grid-row: 1;
    }
    &.home-about-us-image--2 {
      grid-column: 2 / span 5;
      grid-row: 2;
    }
  }
}

.news-list.news-list--home {
  & .webgene-blog {
    display: grid;
    gap: 1.25rem;
    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}