.home-hero {
  position: relative;
  padding-top: 1.25rem;
  padding-left: 0.75rem;
  @media (min-width: 768px) {
    padding-top: 3rem;
    padding-left: 2rem;
  }
  @media (min-width: 1200px) {
    padding-top: 0;
    padding-left: 11.25rem;
  }
  
  & .home-hero__vail {
    position: absolute;
    left: 0;
    width: 100%;
    &.home-hero__vail--1 {
      top: 0;
      transform: translateY(230%);
      @media (min-width: 1200px) {
        transform: translateY(60%);
      }
    }
    &.home-hero__vail--2 {
      bottom: 0;
      transform: translateY(-20%);
      @media (min-width: 1200px) {
        transform: translateY(15%);
      }
    }
  }
  
  & .home-hero__hexagons {
    position: relative;
    aspect-ratio: 367 / 384;
    width: 141.8666666667%;
    @media (min-width: 1200px) {
      width: 103.5%;
      margin-top: -4.5rem;
    }
    
    & .home-hero__hexagon {
      position: absolute;
      width: 37.7384196185%;
      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
      &.home-hero__hexagon--1 {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      &.home-hero__hexagon--2 {
        top: 17.1875%;
        left: 0;
        filter: var(--elevation-2-filter);
        & img {
          object-fit: contain;
          background-color: var(--ex-light-yellow);
        }
      }
      &.home-hero__hexagon--3 {
        top: 34.375%;
        left: 50%;
        transform: translateX(-50%);
        & img {
          object-fit: contain;
          background-color: var(--ex-light-yellow);
        }
      }
      &.home-hero__hexagon--4 {
        top: 17.1875%;
        right: 0;
      }
      &.home-hero__hexagon--5 {
        top: 51.5625%;
        left: 0;
      }
      &.home-hero__hexagon--6 {
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      &.home-hero__hexagon--7 {
        top: 51.5625%;
        right: 0;
      }
    }
  }
}

@media (min-width: 1024px) {
  & .home-features-hexagons {
    position: relative;
    aspect-ratio: 720 / 383;
    width: 100%;

    & .home-features-hexagon {
      position: absolute;
      width: 38.8888888889%;
      &.home-features-hexagon--1 {
        top: 0;
        left: 0;
      }
      &.home-features-hexagon--2 {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      &.home-features-hexagon--3 {
        top: 0;
        right: 0;
      }
    }
  }
}

.home-features-illust {
  display: none;
  width: 7.5rem;
  @media (min-width: 1024px) {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.home-services-hexagon {
  position: absolute;
  width: 62.5rem;
  top: -18rem;
  &.home-services-hexagon--individuals {
    left: -8.25rem;
  }
  &.home-services-hexagon--businesses {
    right: -15rem;
  }
}

.agriculture-hexagons {
  position: absolute;
  display: flex;
  flex-direction: column;
  &.agriculture-hexagons--tl {
    width: 29.375rem;
    top: -12.5rem;
    left: -1.25rem;
    @media (min-width: 768px) {
      top: -14.5rem;
      left: -7.25rem;
    }
    @media (min-width: 1024px) {
      left: -2.25rem;
    }
    @media (min-width: 1200px) {
      top: -5.625rem;
      left: 1.25rem;
    }
    & .agriculture-hexagon-1 {
      width: 85.1063829787%;
      margin-left: auto;
    }
    & .agriculture-hexagon-2 {
      width: 51.0638297872%;
      margin-top: -7%;
    }
  }
  &.agriculture-hexagons--br {
    width: 23.125rem;
    right: -1.25rem;
    bottom: -5.625rem;
    @media (min-width: 768px) {
      right: -5.25rem;
      bottom: -9.625rem;
    }
    @media (min-width: 1024px) {
      right: -2.25rem;
    }
    @media (min-width: 1200px) {
      right: 5.625rem;
      bottom: -6.75rem;
    }
    & .agriculture-hexagon-3 {
      width: 54.0540540541%;
      margin-left: auto;
    }
    & .agriculture-hexagon-4 {
      width: 86.4864864865%;
      margin-top: -7%;
    }
  }
}

.home-blog-list.swiper {
  width: 100%;
  overflow: visible;
  @media (min-width: 1024px) {
    & .webgene-blog {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
      & .webgene-item {
        width: 100% !important;
        margin-right: auto !important;
      } 
    }
  }
}