[data-component-id="avchildcare:who_we_are_banner"] {

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 64px 20px;
  overflow-y: visible;

  & .banner-bg {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -2;
  }

  & .banner-bg.pc {
    display: none;
  }

  & .banner-container {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 1312px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  & .banner-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    & .paragraph {
      margin: 0;
    }
  }

  & .banner-photos {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 353px;
    margin: auto;
    width: 100%;    
  }
  & .banner-photos img {
    position: absolute;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: -1;
  }

  & .first-two-img {
    height: 416px;
  }
  & .second-two-img {
    height: 511px;
  }

  & .first-img {
    top: 0;
    left: 133px;
    -webkit-mask-image: url('../../images/assets/who-are-we-stone-mask-1.svg');
    mask-image: url('../../images/assets/who-are-we-stone-mask-1.svg');
    aspect-ratio: 365/372;
    max-width: 220px;
  }

  & .second-img,
  & .third-img,
  & .fourth-img {
    -webkit-mask-image: url('../../images/assets/who-are-we-stone-mask-2.svg');
    mask-image: url('../../images/assets/who-are-we-stone-mask-2.svg');
  }

  & .second-img {
    top: 192px;
    left: 12px;
    aspect-ratio: 355/373;
    max-width: 213px;
  }

  & .third-img {
    top: 0;
    left: 117px;
    aspect-ratio: 393/413;
    max-width: 236px;
  }

  & .fourth-img {
    top: 228px;
    left: -6px;
    aspect-ratio: 386/405;
    max-width: 231px;
  }
}

@media (min-width: 768px) {
  [data-component-id="avchildcare:who_we_are_banner"] {
    padding: 112px 64px;

    & .banner-photos {
      position: absolute;
      inset: 0;
      max-width: 100%;
    }
    & .banner-bg.pc {
      display: block;
    }
    & .banner-container {
      aspect-ratio: 1312 / 1080;
      height: auto;
      display: block;
    }
    & .first-two-img,
    & .second-two-img {
      height: auto;
    }
    & .first-img {
      top: 10.463%;
      left: 65.244%;
      max-width: 27.82%;
    }
    & .second-img {
      top: 64.722%;
      left: 72.256%;
      max-width: 27.058%;
    }

    & .third-img {
      top: 55.37%;
      left: 3.125%;
      max-width: 29.954%;
    }

    & .fourth-img {
      top: 41.852%;
      left: 37.957%;
      max-width: 29.421%;
    }
  }
}