.home-hero {
  position: relative;
  display: grid;
  gap: 5rem;
  padding-left: 1.25rem;
  &::before {
    content: "";
    aspect-ratio: 241 / 304;
    width: 15.5rem;
    background-image: url("/system_panel/uploads/images/strawberries.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -11.5rem;
    left: -6.5rem;
    transform: scaleX(-1);
    @media (min-width: 768px) {
      bottom: -10rem;
      left: -4rem;
    }
    @media (min-width: 1024px) {
      bottom: -6.5rem;
      left: -2.5rem;
    }
  }
  &::after {
    content: "";
    z-index: -1;
    aspect-ratio: 120 / 116;
    width: 7.5rem;
    background-image: url("/system_panel/uploads/images/leaf-1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 2.5rem;
    right: -3.75rem;
    @media (min-width: 1024px) {
      bottom: 10rem;
      z-index: 0;
    }
    @media (min-width: 1200px) {
      bottom: 13rem;
    }
  }
  @media (min-width: 768px) {
    padding-left: 2.5rem;
  }
  @media (min-width: 1024px) {
    padding-bottom: 7.5rem;
    padding-left: 3.75rem;
    height: 50rem;
  }
  @media (min-width: 1200px) {
    padding-left: 5rem;
    height: clamp(50rem, (var(--vh, 1vh) * 100), 65rem); 
  }
  
  & .home-hero__images {
    display: grid;
    gap: 0.5rem;
    height: 20rem;
    & img {
      object-fit: cover;
      width: 100%;
      &:first-child {
        height: 100%;
      }
      &:last-child {
        height: 7.5rem;
        margin-left: 19.7183098592%;
      }
    }
    @media (min-width: 768px) {
      flex: 1 1 0%;
      height: 30rem;
      & img {
        &:last-child {
          height: 12rem;
        }
      }
    }
    @media (min-width: 1024px) {
      height: 100%;
      grid-template-columns: 1fr 40%;
      gap: 1.5rem;
      & img {
        &:last-child {
          height: 100%;
          margin-left: 0;
          padding-bottom: 7.5rem;
        }
      }
    }
  }
  
  & .home-hero__content {
    position: relative;
    display: grid;
    gap: 2.5rem;
    & .home-hero__title {
      line-height: 1.1;
      letter-spacing: 0.12em;
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 4rem;
      text-shadow: var(--elevation-2);
    }
    & .home-hero__text {
      line-height: 2;
      font-size: 1rem;
    }
    @media (min-width: 768px) {
      align-self: end;
      & .home-hero__title {
        font-size: 4.5rem;
      }
      & .home-hero__text {
        font-size: 1.125rem;
        padding-left: 0.5rem;
      }
    }
    @media (min-width: 1024px) {
      gap: 5rem;
      padding-top: 5rem;
      align-self: center;
      & .home-hero__title {
        font-size: 5rem;
      }
    }
    @media (min-width: 1200px) {
      gap: 6.25rem;
      padding-top: 7.5rem;
      & .home-hero__title {
        font-size: 6.25rem;
      }
      & .home-hero__text {
        font-size: 1.25rem;
        padding-left: 0.75rem;
      }
    }
  }
  
  & .home-news {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    background-color: hsl(0deg 0% 100% / 40%);
    backdrop-filter: blur(4px);
    box-shadow: var(--elevation-2);
    &::before {
      content: "News";
      line-height: 1;
      letter-spacing: 0.16em;
      font-size: 2.5rem;
      color: var(--olive);
      position: absolute;
      top: -1.5rem;
      left: -0.75rem;
    }
    & .webgene-item > a {
      border-bottom: none;
      padding-bottom: 0;
    }
    @media (min-width: 768px) {
      width: 25rem;
    }
    @media (min-width: 1024px) {
      position: absolute;
      left: 3.75rem;
      bottom: 2.5rem;
    }
    @media (min-width: 1200px) {
      left: 5rem;
    }
  }
}

.home-philosophy--bg-image {
  position: absolute;
  inset: 0;
  & img {
    opacity: 80%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.80) 10%, rgba(255, 255, 255, 0.40) 26%, rgba(255, 255, 255, 0.00) 70.45%, rgba(255, 255, 255, 0.00) 100%);
    -webkit-mask-image: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.80) 10%, rgba(255, 255, 255, 0.40) 26%, rgba(255, 255, 255, 0.00) 70.45%, rgba(255, 255, 255, 0.00) 100%);
  }
}

.home-initiatives-num {
  position: absolute;
  top: -3.5rem;
  left: -0.25rem;
  opacity: 10%;
  line-height: 1;
  letter-spacing: -0.04em;
  font-size: 5rem;
  color: var(--olive);
}