.home-hero {
  position: relative;
  height: 30rem;
  padding-inline: 0.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  @media (min-width: 768px) {
    height: 35rem;
    padding-inline: 2.5rem;
  }
  @media (min-width: 1024px) {
    height: 40rem;
    padding-inline: 3.75rem;
  }
  @media (min-width: 1200px) {
    height: clamp(50rem, 100dvh, 60rem);
    padding-inline: 7.5rem;
  }
  
  & .home-hero__image {
    position: absolute;
    inset: 0 0 -2.5rem 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
    &::before,
    &::after,
    & img {
      -webkit-mask-image: url("/system_panel/uploads/images/mask-heptagon.png");
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-image: url("/system_panel/uploads/images/mask-heptagon.png");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
    }
    &::before {
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 2rem -2.5rem -2rem 2.5rem;
      background-color: var(--sky);
      opacity: 0.7;
    }
    &::after {
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--black);
      opacity: 0.3;
    }
    & img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  
  & .home-hero__news {
    & .webgene-item a {
      flex-direction: row;
      align-items: baseline;
      padding-bottom: 0;
      border-bottom: none;
      & > p {
        font-size: 0.75rem;
      }
      & > h3 {
        font-size: 0.875rem;
      }
    }
    @media (min-width: 768px) {
      & .webgene-blog {
        flex: 1 1 0%;
      }
      & .webgene-item a {
        gap: 1.25rem;
        & > p {
          font-size: 0.875rem;
        }
        & > h3 {
          font-size: 1.125rem;
        }
      }
    }
    @media (min-width: 1200px) {
      bottom: 2.5rem;
    }
  }
}

.section-title.section-title--home-news {
  & > p {
    font-size: 1.125rem;
  }
  @media (min-width: 768px) {
    & > p {
      font-size: 1.5rem;
    }
  }
}

.home-intro-bg-logo {
  position: absolute;
  width: 20rem;
  filter: blur(4px);
  max-width: none;
  &.home-intro-bg-logo--jemco {
    width: 30rem;
    filter: blur(3px);
    transform: rotate(-2deg);
    top: -0.375rem;
    left: -15rem;
  }
  &.home-intro-bg-logo--tanzo {
    transform: translateY(-50%) rotate(8deg);
    top: 50%;
    right: -11.25rem;
  }
  &.home-intro-bg-logo--koneri {
    transform: rotate(-3deg);
    bottom: 9rem;
    left: -8.5rem;
  }
  @media (min-width: 1024px) {
    &.home-intro-bg-logo--jemco {
      left: -0.625rem;
    }
    &.home-intro-bg-logo--tanzo {
      right: 0;
    }
    &.home-intro-bg-logo--koneri {
      left: 3.5rem;
    }
  }
}

.ecosystem-bg-decs {
  position: absolute;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 65rem;
  filter: blur(6px);
  @media (min-width: 768px) {
    min-width: 85rem;
  }
  @media (min-width: 1024px) {
    min-width: 100rem;
  }
  &::before,
  &::after {
    content: "";
    -webkit-mask-image: url("/system_panel/uploads/images/mask-heptagon.png");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/system_panel/uploads/images/mask-heptagon.png");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
  &::before {
    background-color: #0B5989;
    transform: scaleX(-1);
    position: absolute;
    inset: 0;
    opacity: 0.8;
    filter: blur(6px);
  }
  &::after {
    background-color: var(--sky);
    transform: scaleY(-1);
    position: absolute;
    inset: 3rem 0 0;
    opacity: 0.7;
    filter: blur(3px);
  }
}

.ecosystem-arrow {
  width: 3rem;
  align-self: center;
  &.ecosystem-arrow--4 {
    display: none;
  }
  @media (min-width: 1200px) {
    width: 4rem;
    &.ecosystem-arrow--1 {
      transform: rotate(-105deg);
    }
    &.ecosystem-arrow--2 {
      transform: rotate(-75deg);
    }
    &.ecosystem-arrow--3 {
      transform: rotate(135deg);
    }
    &.ecosystem-arrow--4 {
      transform: rotate(45deg);
      display: block;
    }
    &.ecosystem-arrow--5 {
      transform: rotate(90deg);
    }
  }
}

.ecosystem-logo {
  min-width: none;
  width: 50rem;
  position: absolute;
  top: calc(50% + 7.375rem);
  left: calc(50% - 8.125rem);
  transform: translate(-50%, -50%);
  filter: blur(4px);
}

.home-media-slider {
  width: 100%;
  overflow: visible;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .swiper-slide {
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.08), 0 4px 12px 2px rgba(0, 0, 0, 0.08), 0 8px 24px 4px rgba(0, 0, 0, 0.08);
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.home-move-character {
  position: absolute;
  bottom: 0;
  width: 6.25rem;
  z-index: 1;
  &.home-move-character--tanzo {
    left: -1.25rem;
  }
  &.home-move-character--koneri {
    right: -2rem;
  }
  @media (min-width: 768px) {
    width: 10rem;
    &.home-move-character--tanzo {
      left: -5rem;
    }
    &.home-move-character--koneri {
      right: -5rem;
    }
  }
  @media (min-width: 1024px) {
    width: 12.5rem;
  }
}