.section--content {
  position: relative;
}

.about-container {
  overflow-x: clip;
  position: relative;
  padding-bottom: 7rem;
}





/* type 2 */
.about-img-wrapper {
  display: flex;
  position: relative;
  justify-content: center;
  flex-direction: column;
}

.about-img {
  flex: none;
}

.about-img img {
  width: 100%;
  position: relative;
  z-index: 2;
}


.btns__about {
  justify-content: center;
}

.about-wrapper {
  position: relative;
  z-index: 3;
}

.content__editor {
  font-size: var(--fs-editor);
  line-height: 2;
}

.btns__content .btn {
  box-shadow: 0 0 10px 10px #ffffffc7;
}

.about-text {
  position: relative;
}

.about-text::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  background-image: radial-gradient(circle, #cbc5ea33 40%, transparent 60%);
  z-index: -2;
  top: -8rem;
  right: -4rem;
  filter: blur(19px);
  pointer-events: none;
}

.about-container>.container {
  position: relative;
}

.bg-about {
  position: absolute;
  width: 100%;
  z-index: -3;
}


.bg-about img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.float-about {
  position: absolute;
  pointer-events: none;
}

.about-container::before {
  content: "";
  position: absolute;
  background-image: url(../../img/shadow.svg);
  inset: 50% calc(var(--gutter-x) * -4) auto;
  transform: translateY(-32%);
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  z-index: -2;
}

/**************************/
/* ABOVE 1200px */
/**************************/
@media (width<1024px) {

  .about-img-wrapper {
    max-width: 56%;
    margin-right: auto;
  }

  .about-container {
    padding-bottom: 3rem;
  }

  .btns__content {
    justify-content: center;
  }

  .about-text {
    padding: 3rem 2rem;
  }

  .about-wrapper::before {
    content: "";
    position: absolute;
    background: #ffffffca;
    inset: 17rem 0 0 0;
    border-radius: 4rem;
    backdrop-filter: blur(20px);
    z-index: -1;
    box-shadow: inset 0 0 14px var(--c-white);
  }

  .no-img .about-wrapper::before {
    inset: 0;
  }

  .about-container::after {
    content: "";
    position: absolute;
    background-image: url(../../img/shadow.svg);
    inset: 50% calc(var(--gutter-x) * -4) auto;
    transform: translateY(-32%);
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    z-index: -2;
  }

  .about-container::after,
  .about-container::before {
    inset: 0 0 -4rem auto;
    transform: none;
    background-image: linear-gradient(2deg, #ff000000, #cc967b30 30%, #ff000000);
    height: auto;
    width: 100%;
  }

  .bg-about {
    inset: 0 auto auto calc(var(--gutter-x) * -4);
    width: 90%;
  }

  .bg-about img {
    object-position: top left;
  }

  .float-about {
    inset: auto -2rem -5rem auto;
    width: 12rem;
  }
}

@media (width>=1024px) {

  .about-wrapper {
    display: flex;
    align-items: end;
    gap: 3rem;
  }

  .about-img-wrapper {
    width: 55rem;
    flex: none;
    order: 2;
  }


  .about-text {
    flex: 1;
    padding: 4rem 4rem 4rem 0;
  }

  .no-img .about-text {
    padding: 4rem;
  }

  .btns__about {
    justify-content: unset;
  }

  .about-text::before {
    content: "";
    position: absolute;
    background: #ffffff7a;
    inset: 0 0 0 -58rem;
    border-radius: 4rem;
    backdrop-filter: blur(20px);
    z-index: -1;
    box-shadow: inset 0 0 14px var(--c-white);
  }

  .no-img .about-text::before {
    inset: 0;
  }

  .bg-about {
    inset: auto auto -5rem calc(var(--gutter-x) * -4);
    height: 100%;
  }

  .bg-about img {
    object-position: bottom left;
  }

  .float-about {
    inset: auto -2rem -8rem auto;
    width: 18rem;
  }
}