.home-hero {
  position: relative;
  overflow: hidden;
  height: calc(100dvh + 7.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  & .home-hero__visuals {
    position: absolute;
    top: 3.75rem;
    left: calc(50% + 7.5rem);
    transform: translateX(-50%);
    aspect-ratio: 11 / 3;
    width: auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
  }
  & .home-hero__visual-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1 0 0%;
    
    & + .home-hero__visual-row {
      margin-top: calc((100 / 3) * -1dvh);
    }
  }
  & .home-hero__image {
    mask-image: url("/system_panel/uploads/images/home-polygon.png");
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-image: url("/system_panel/uploads/images/home-polygon.png");
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    width: calc(100% / 3);
    
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 11 / 6; 
    }
    
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-color: hsla(225 56 30 / 60%);
    }
  }
  & .home-hero__visual-row {
    &::before, &::after {
      width: 33.3333%;
      aspect-ratio: 11 / 6;
      position: absolute;
      content: "";
      z-index: -1;
      background-size: 100% 100%;
    }
  }
  & .home-hero__visual-row:first-child {
    &::before {
      top: 18.3%;
      left: 11.09090909%;
      background-image: url("/system_panel/uploads/images/home-polygon-yellow.png");
    }
    &::after {
      top: 2%;
      left: 36.2344%;
      background-image: url("/system_panel/uploads/images/home-polygon-blue.png");
    }
  }
  & .home-hero__visual-row:last-child {
    &::before {
      bottom: -3rem;
      left: 17.4432%;
      background-image: url("/system_panel/uploads/images/home-polygon-blue.png");
    }
    &::after {
      bottom: -1.5rem;
      left: 49.2334%;
      background-image: url("/system_panel/uploads/images/home-polygon-yellow.png");
    }
  }
  
  & .decoration-backdrop {
    & .decoration-backdrop__blue {
      &::before {
        top: 13.125rem;
        left: 23.125rem;
      }
      &::after {
        content: none;
      }
    }
    & .decoration-backdrop__yellow {
      &::before {
        top: 10rem;
        right: 11.75rem;
      }
      &::after {
        bottom: 5.5rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  
  & .home-hero__ring {
    position: absolute;
    top: 60%;
    left: 25%;
    transform: translate(-50%, -50%);
    aspect-ratio: 19 / 10;
    background-image: url("/system_panel/uploads/images/home-hero-ring.svg");
    background-size: contain;
    width: 71.25rem;
  }
  
  & .home-hero__contents {
    position: relative;
    z-index: 1;
    padding-inline: 0.625rem;
    font-size: 1rem;
    color: var(--snow);
    text-align: end;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    
    @media (min-width: 768px) {
      font-size: 1.25rem;
      align-items: flex-start;
      padding-inline: 2.5rem;
      padding-top: 3rem;
    }
    @media (min-width: 1024px) {
      font-size: 1.5625rem;
      padding-inline: 6.25rem;
      padding-top: 12rem;
    }
  }
  & .home-hero__hgroup {
    & > p {
      line-height: 1.25;
      font-weight: 700;
      font-size: 2em;
    }
    & > h1 {
      line-height: 0.84;
      font-size: 4em;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
  }
  & .home-hero__sub {
    font-size: 0.625em;
    font-weight: 700;
    line-height: 1.25;
  }
}

.home-service-card {
  position: relative;
  padding: 1.5rem 1rem 3rem 1rem;
  z-index: 0;
  max-width: 67.5rem;
  width: 100%;
  
  &:nth-child(odd) {
    margin-right: auto;
  }
  &:nth-child(even) {
    margin-left: auto;
  }
  
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: var(--yellow);
    top: 1.25rem;
    left: 1.25rem;
    box-shadow: var(--elevation-1);
    z-index: -1;
  }
  
  &:nth-child(even)::after {
    left: unset;
    right: 1.25rem;
  }
  
  & .home-service-card__image {
    position: absolute;
    inset: 0;
    
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-color: hsla(225 56 30 / 60%);
    }
  }
}

.home-news-list {
  overflow: visible;
}