.cb_accent {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  z-index: 5;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
}
@supports (margin: clamp(1em, 1vw, 1em)) {
  .cb_accent {
    margin-top: clamp(50px, 8.3333333333vw, 120px);
    margin-bottom: clamp(50px, 8.3333333333vw, 120px);
  }
}
.cb_accent .site__inner {
  position: relative;
}
@media (max-width: 768px) {
  .cb_accent .site__inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.cb_accent__container {
  display: grid;
  column-gap: 30px;
  row-gap: 50px;
  align-items: flex-start;
}
@media (min-width: 769px) {
  .cb_accent__container {
    grid-template-columns: 450fr 300fr;
  }
  .cb_accent--align_left .cb_accent__container {
    grid-template-columns: 300fr 450fr;
  }
  @supports (column-gap: clamp(1em, 1vw, 1em)) {
    .cb_accent__container {
      column-gap: clamp(80px, 11.8055555556vw, 170px);
    }
  }
}

.cb_accent__content {
  position: relative;
}
@media (max-width: 768px) {
  @supports (padding: clamp(1em, 1vw, 1em)) {
    .cb_accent__content {
      padding-left: clamp(36px, 9.7222222222vw, 140px);
      padding-right: clamp(36px, 9.7222222222vw, 140px);
    }
  }
}

.cb_accent__background {
  position: relative;
}
@media (min-width: 769px) {
  .cb_accent--align_left .cb_accent__background {
    grid-row: 1;
    grid-column: 1;
    margin-left: -100%;
  }
}
@media (min-width: 769px) {
  .cb_accent--align_right .cb_accent__background {
    margin-right: -100%;
  }
}

.cb_accent__background__image {
  z-index: 10;
  position: relative;
  aspect-ratio: 600/400;
  height: auto;
  object-position: center;
  object-fit: cover;
}
@media (min-width: 769px) {
  .cb_accent__background__image {
    border-radius: 50px;
  }
}

.cb_accent__icon {
  z-index: 15;
  position: absolute;
  color: var(--purple);
}
.cb_accent__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.cb_accent__icon--smile {
  top: 8.3333333333%;
  width: 24.3333333333%;
}
.cb_accent--align_left .cb_accent__icon--smile {
  right: -6.6666666667%;
}
.cb_accent--align_right .cb_accent__icon--smile {
  left: -6.6666666667%;
}

.cb_accent__icon--corner {
  top: 6.6666666667%;
  width: 26.6666666667%;
}
.cb_accent--align_left .cb_accent__icon--corner {
  right: -8.3333333333%;
}
.cb_accent--align_right .cb_accent__icon--corner {
  left: -8.3333333333%;
}

@media (min-width: 769px) {
  .cb_accent__copy {
    margin-top: 40px;
  }
}
.cb_accent__copy h2 {
  font-size: 36px;
  line-height: 1.1666666667;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--black);
}
@supports (font-size: clamp(1em, 1vw, 1em)) {
  .cb_accent__copy h2 {
    font-size: clamp(30px, 4vw, 42px);
  }
}
.cb_accent__copy p {
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
@supports (font-size: clamp(1em, 1vw, 1em)) {
  .cb_accent__copy p {
    font-size: clamp(16px, 1.2857142857vw, 18px);
  }
}
.cb_accent__copy h2 + p {
  margin-top: 1.75em;
}

.cb_accent__blur {
  position: absolute;
  bottom: -45%;
  width: 83.3333333333%;
  filter: blur(50px);
  opacity: 0.5;
  color: var(--purple);
}
.cb_accent--align_right .cb_accent__blur {
  left: -21.1538461538%;
}
.cb_accent--align_left .cb_accent__blur {
  right: -21.1538461538%;
}
.cb_accent__blur svg {
  display: block;
  width: 100%;
  height: auto;
}