.home-hero {
  z-index: 1;
  position: relative;
  height: clamp(37.5rem, calc(var(--vh, 1vh) * 100), 67.5rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: flex-end;
  
  & .home-hero__news {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: rgba(9 35 52 / 5%);
    box-shadow: var(--elevation-1);
    backdrop-filter: blur(16px);
  }
  
  
  @media screen and (min-width: 1024px) {
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 2rem;
    padding-bottom: 2rem;
    padding-inline: 4rem;
    
    & .home-hero__news {
      max-width: 30rem;
    }
  }
  
  & .swiper {
    width: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    & .swiper-wrapper {
      height: 100%;
    }
    & .swiper-slide {
      height: 100%;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.05) 79.33%, rgba(0, 0, 0, 0.35) 88.46%, rgba(0, 0, 0, 0.35) 100%);
        z-index: 1;
      }
    }
  }
}

.home-recipe {
  z-index: 1;
  position: relative;
  
  & .swiper {
    width: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    & .swiper-wrapper {
      height: 100%;
      transition-timing-function: linear;
    }
    & .swiper-slide {
      height: 100%;
    }
  }
  
  & .home-recipe__content {
    position: relative;
    z-index: 1;
    background-color: rgba(9 35 52 / 50%);
    box-shadow: var(--elevation-1);
    backdrop-filter: blur(16px);
  }
}

.home-brand-image {
  position: absolute;
  bottom: 0;
  left: -4rem;
  width: 64%;
  z-index: 5;
  
  @media screen and (min-width: 1024px) {
    left: -1.875rem;
    width: 15.25%;
  }
  @media screen and (min-width: 1200px) {
    left: -1.875rem;
    width: 20.25%;
  }
}

.home-stamp {
  position: absolute;
  top: -3.75rem;
  right: -1rem;
  width: 10rem;
  &.home-stamp--activity {
    width: 7.5rem;
  }
  
  @media (min-width: 1024px) {
    top: 6rem;
    
    &.home-stamp--activity {
      top: -3rem;
    }
  }
  @media (min-width: 1200px) {
    top: 4rem;
    right: 13rem;
    
    &.home-stamp--activity {
      top: 1.5rem;
      right: 1.25rem;
    }
  }
}

.home-products-grid {
  display: flex;
  width: 100%;
  overflow-x: auto;
  margin-block-start: -3rem;
  & > img {
    width: 93%;
    min-width: 93%;
    margin-inline-start: -13%;
    & + img {
      margin-inline-start: -25%;
    }
  }
  @media (min-width: 768px) {
    justify-content: center;
    overflow: visible;
    & > img {
      width: 45%;
      min-width: unset;
      margin-inline-start: unset !important;
    }
    & > img:nth-child(2) {
      margin-inline: -15% !important;
    }
  }
}