.home-hero {
  display: flex;
  flex-direction: column;
  
  @media screen and (min-width: 1200px) {
    flex-direction: row;
  }
}

.home-hero__box {
  display: flex;
  flex-direction: column;
}

.home-hero__box--1 {
  @media screen and (min-width: 1200px) {
    width: 31.25%;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.home-hero__box--2 {
  @media screen and (min-width: 1200px) {
    width: 68.75%;
    flex-direction: row;
  }
}

.home-hero__images {
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.625rem;
  height: 20rem;
  
  @media screen and (min-width: 414px) {
    height: 25rem;
  }
  
  @media screen and (min-width: 768px) {
    height: 45rem;
  }
  
  @media screen and (min-width: 1024px) {
    height: 60rem;
  }
  
  @media screen and (min-width: 1200px) {
    height: 100%;
  }
  
  & .home-hero__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  & .home-hero__image--1 {
    grid-row: 1 / span 5;
    grid-column: 1 / span 3;
  }
  
  & .home-hero__image--2 {
    grid-row: 1 / span 2;
    grid-column: 4 / span 3;
  }
  
  & .home-hero__image--3 {
    grid-row: 3 / span 2;
    grid-column: 4 / span 3;
  }
  
  & .home-hero__image--4 {
    grid-row: 5 / span 2;
    grid-column: 4 / span 3;
  }
  
  & .home-hero__image--5 {
    grid-row: 6 / span 2;
    grid-column: 1 / span 2;
  }
  
  & .home-hero__image--6 {
    grid-row: 6 / span 2;
    grid-column: 3 / span 1;
  }
  
  & .home-hero__image--7 {
    grid-row: 7 / span 1;
    grid-column: 4 / span 3;
  }
}

.home-hero__rect {
  position: absolute;
  display: none;
  height: 40px;
  width: 30px;
  right: -30px;
  
  @media screen and (min-width: 1200px) {
    display: block;
  }
}

.home-hero__rect--1 {
  top: 0;
}

.home-hero__rect--2 {
  bottom: 0;
}

.home-news-dec {
  position: absolute;
  width: 44.5%;
  bottom: 80px;
  right: 10px;
}


.customer-voice-bubble {
  position: relative;
  padding: 1rem;
  border: 2px solid var(--ink);
  background-color: var(--snow);
    
  @media screen and (min-width: 768px) {
    padding: 1.5rem;
  }
    
  &::before {
    content: "";
    position: absolute;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    border-bottom: 2px solid var(--ink);
    background-color: var(--snow);
    transform: rotate(-45deg);
    bottom: -1rem;
    left: 120px;
  }
}
  
.text-wrap {
  position: relative;
  & > p {
    display: inline;
  }
  & > p + p {
    margin-left: -0.125em;
  	}
  & .marker {
    background-image: linear-gradient(transparent 55%, var(--yellow) 55%);
  }
}

.home-vices-dec {
  position: absolute;
  width: 41.75%;
  
  &.home-vices-dec--tr {
    top: -50px;
    right: -100px;
  }
  
  &.home-vices-dec--bl {
    bottom: -40px;
    left: -120px;
  }
}

.home-about-dec {
  position: absolute;
  width: 51.3%;
  top: -20px;
  right: -180px;
}