.home-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 1rem;
  background-color: var(--beige);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -32px; 
  z-index: 1;
  padding-top: 8rem;
  @media (min-width: 768px) {
    justify-content: end;
  }
  @media (min-width: 1200px) {
    padding-top: 15rem;
  }
  
  & .home-hero__slider {
    &:not(.swiper-initialized) {
      & .swiper-wrapper {
        display: flex;
        overflow: auto;
      }
      & .swiper-slide {
        min-width: 80%;
      }
    }
    overflow: visible;
    width: 100%;
    
    & .swiper-slide {
      aspect-ratio: 3 / 2;
      position: relative;
      transition: opacity ease 200ms;
      & .swiper-slide__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        &.swiper-slide__image--1 {
          mask-image: url("/system_panel/uploads/images/home-slide-mask-1.png");
          -webkit-mask-image: url("/system_panel/uploads/images/home-slide-mask-1.png");
        }
        &.swiper-slide__image--2 {
          mask-image: url("/system_panel/uploads/images/home-slide-mask-2.png");
          -webkit-mask-image: url("/system_panel/uploads/images/home-slide-mask-2.png");
        }
        &.swiper-slide__image--3 {
          mask-image: url("/system_panel/uploads/images/home-slide-mask-3.png");
          -webkit-mask-image: url("/system_panel/uploads/images/home-slide-mask-3.png");
        }
      }
      
      & .swiper-slide__title {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        @media (min-width: 768px) {
          left: auto;
          transform: none;
          bottom: 1rem;
          right: 0;
          width: 59.2592592593%;
          &.swiper-slide__title--3 {
            left: 0;
            bottom: 2rem;
            right: auto;
          }
        }
      }
      &:hover {
        opacity: 90%;
      }
    }
  }
}

.home-intro-title-image {
  width: calc(100% + 1rem);
  max-width: 36.25rem;
  margin-left: -1rem;
  align-self: center;
}

.home-intro__slider,
.home-intro__slider--reverse {
  &:not(.swiper-initialized) {
    & .swiper-wrapper {
      display: flex;
      overflow: auto;
    }
    & .swiper-slide {
      min-width: 30%;
    }
  }
  width: 100%;
  overflow: visible;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .swiper-slide {
    & img {
      mask-image: url("/system_panel/uploads/images/home-image-mask.png");
      -webkit-mask-image: url("/system_panel/uploads/images/home-image-mask.png");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      aspect-ratio: 540 / 484;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  @media (min-width: 1024px) {
    display: none;
  }
}

.home-intro__slider--vertical,
.home-intro__slider--vertical-reverse {
  &:not(.swiper-initialized) {
    position: relative;
    inset: 0;
    width: 100%;
    & .swiper-wrapper {
      display: flex;
      overflow: auto;
    }
    & .swiper-slide {
      min-width: 30%;
    }
  }
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10rem;
  width: 20rem;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .swiper-slide {
    & img {
      mask-image: url("/system_panel/uploads/images/home-image-mask.png");
      -webkit-mask-image: url("/system_panel/uploads/images/home-image-mask.png");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      aspect-ratio: 540 / 484;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  @media (min-width: 1024px) {
    display: block;
  }
  @media (min-width: 1200px) {
    width: 30rem;
    left: -5rem;
  }
}


.home-intro__slider--vertical-reverse {
  right: -10rem;
  left: auto;
  @media (min-width: 1200px) {
    right: -5rem;
  }
}

.home-service-typo {
  position: absolute;
  top: 0;
  &.home-service-typo--1 {
    left: 0;
    transform: scale(0.6) translate(5%, -60%);
    @media (min-width: 768px) {
      transform: scale(0.8) translate(-5%, -60%);
    }
    @media (min-width: 1200px) {
      transform: scale(1) translate(-5%, -60%);
    }
  }
  &.home-service-typo--2 {
    right: 0;
    transform: scale(0.6) translate(-10%, -50%);
    @media (min-width: 768px) {
      transform: scale(0.8) translate(-10%, -50%);
    }
    @media (min-width: 1200px) {
      transform: scale(1) translate(-10%, -50%);
    }
  }
  &.home-service-typo--3 {
    left: 0;
    transform: scale(0.6) translate(10%, -50%);
    @media (min-width: 768px) {
      transform: scale(0.8) translate(-10%, -50%);
    }
    @media (min-width: 1200px) {
      transform: scale(1) translate(-10%, -50%);
    }
  }
}

.home-news-title {
  width: 100%;
  max-width: 28.75rem;
  margin-top: -10rem;
  margin-left: -1.5rem;
}

.insta1 {
  & .webgene-blog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    & .webgene-no-items {
      grid-column: span 4 / span 4;
    }
    @media (min-width: 768px) {
      gap: 1rem;
    }
    @media (min-width: 1024px) {
      gap: 1.5rem;
    }
  }
}