.wysiwyg {
  container-name: wysiwyg;
  container-type: inline-size;

  @container (width >= 720px) {
    .wrapper > & {
      padding: 0 8.3333%;
    }
  }

  @container (width >= 960px) {
    .wrapper > & {
      padding: 0 16.6666%;
    }
  }

  blockquote {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewbox='0 0 32 32'%3E%3Cpath d='M8.671 11.841c1.301-2.080 3.485-4.275 6.554-6.586l-2.301-2.674c-2.268 1.651-4.169 3.186-5.704 4.605s-2.752 2.806-3.652 4.16c-0.901 1.354-1.551 2.74-1.951 4.16s-0.6 2.955-0.6 4.605c0 6.206 2.368 9.309 7.104 9.309 2.068 0 3.719-0.561 4.953-1.684s1.851-2.575 1.851-4.358c0-1.585-0.484-2.889-1.451-3.912s-2.218-1.535-3.752-1.535c-1.134 0-2.135 0.264-3.002 0.792 0-2.509 0.65-4.803 1.951-6.883zM25.248 11.841c1.301-2.080 3.485-4.275 6.554-6.586l-2.301-2.674c-2.268 1.651-4.169 3.186-5.704 4.605s-2.752 2.806-3.652 4.16-1.551 2.74-1.951 4.16c-0.4 1.419-0.6 2.955-0.6 4.605 0 6.206 2.368 9.309 7.104 9.309 2.068 0 3.719-0.561 4.953-1.684s1.851-2.575 1.851-4.358c0-1.585-0.484-2.889-1.451-3.912s-2.218-1.535-3.752-1.535c-1.134 0-2.135 0.264-3.002 0.792 0-2.509 0.65-4.803 1.951-6.883z' fill='%23017550'%3E%3C/path%3E%3C/svg%3E");
    background-position: 16px 0;
    background-repeat: no-repeat;
    border-radius: 16px;
    margin: 48px 0;
    padding: 48px 16px 10px;

    p {
      color: var(--primary);
      font-size: 19.02px;
      font-style: italic;
      font-weight: 800;
      line-height: 1.5;

      @media (width >= 1024px) {
        font-size: 23.04px;
      }
    }

    cite {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 2px;
      line-height: 1;
      text-transform: uppercase;

      @media (width >= 1024px) {
        font-size: 19.2px;
      }
      font-style: normal;
    }

    mark {
      background-color: transparent;

      span {
        background: var(--accent-green-25);
        border-radius: 4px;
        box-decoration-break: clone;
        color: var(--primary);
        display: inline;
        line-height: 1.5;
        padding: 0 0.2em;
      }
    }

    @container (width >= 720px) {
      background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewbox='0 0 32 32'%3E%3Cpath d='M8.671 11.841c1.301-2.080 3.485-4.275 6.554-6.586l-2.301-2.674c-2.268 1.651-4.169 3.186-5.704 4.605s-2.752 2.806-3.652 4.16c-0.901 1.354-1.551 2.74-1.951 4.16s-0.6 2.955-0.6 4.605c0 6.206 2.368 9.309 7.104 9.309 2.068 0 3.719-0.561 4.953-1.684s1.851-2.575 1.851-4.358c0-1.585-0.484-2.889-1.451-3.912s-2.218-1.535-3.752-1.535c-1.134 0-2.135 0.264-3.002 0.792 0-2.509 0.65-4.803 1.951-6.883zM25.248 11.841c1.301-2.080 3.485-4.275 6.554-6.586l-2.301-2.674c-2.268 1.651-4.169 3.186-5.704 4.605s-2.752 2.806-3.652 4.16-1.551 2.74-1.951 4.16c-0.4 1.419-0.6 2.955-0.6 4.605 0 6.206 2.368 9.309 7.104 9.309 2.068 0 3.719-0.561 4.953-1.684s1.851-2.575 1.851-4.358c0-1.585-0.484-2.889-1.451-3.912s-2.218-1.535-3.752-1.535c-1.134 0-2.135 0.264-3.002 0.792 0-2.509 0.65-4.803 1.951-6.883z' fill='%23017550'%3E%3C/path%3E%3C/svg%3E");
      background-position: 6.25% 40px;
      // padding: 40px 12.5% 40px 15%;
      padding: 10px 12.5% 10px 15%;
    }
  }

  figure {
    border-radius: 20px;
    margin: 8px auto 24px;
    overflow: hidden;
    position: relative;

    @container wysiwyg (width > 600px) {
      border-radius: 40px;
    }

    &:has([class*='media--view-mode'][class*='full_width']) {
      float: none;
      /* margin: 10px 0; */
      max-width: 100%;
      width: 100%;

      [class*='media--view-mode'] {
        margin: 0;
      }
    }

    img {
      border-radius: 0;
      margin: 0;
      position: relative;
      width: 100%;
      z-index: 1;
    }

    figcaption {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.5;
      background-color: var(--secondary-navy);
      color: white;
      padding: 8px 20px;
      text-align: center;

      p {
        margin: 0;
        max-width: 100%;
      }
    }

    p & {
      margin-bottom: 8px;
    }

    /* @container wysiwyg (width >= 768px) {
      float: left;
      margin: 0 24px 16px 0;
      max-width: 480px;
      width: 50%;
    } */
  }

  h1,
  h2 {
    clear: both;

    &:not(:first-child) {
      margin-top: 42px;
    }
  }

  h3,
  h4,
  h5,
  h6 {
    clear: both;

    &:not(:first-child) {
      margin-top: 36px;
    }
  }

  /* img {
    &:not([class], [align]) {
      margin: 8px auto 24px;
    }
  } */

  img,
  video {
    border-radius: 20px;
    display: block;
    height: auto;
    margin: 8px auto 24px;
    max-width: 100%;
    width: 100%;

    @container media-wrapper (width > 600px) {
      border-radius: 40px;
    }
  }

  ol,
  ul:not([class]) {
    margin: 0 0 1.5rem;
    padding-left: 40px;

    ul,
    ol,
    li {
      margin-bottom: 0;
    }

    li {
      line-height: 1.5;

      &::marker {
        color: var(--primary);
        font-weight: 700;
      }
    }
  }

  ol {
    &.type-lower-alpha {
      list-style-type: lower-alpha;
    }

    &.type-lower-roman {
      list-style-type: lower-roman;
    }

    &.type-upper-alpha {
      list-style-type: upper-alpha;
    }

    &.type-upper-roman {
      list-style-type: upper-roman;
    }
  }

  ul:not([class]) {
    > li {
      list-style-type: disc;
    }
  }

  p {
    line-height: 1.5;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .btn {
    --background: #fff;
    --border: #173f6c;
    --color: #173f6c;
    --focus-border: #231f20;
    --hover-background: #fff;
    --hover-border: #5d2e8f;
    --hover-color: #5d2e8f;
    --icon-background: transparent;

    align-items: center;
    background-color: transparent;
    color: var(--color);
    cursor: pointer;
    display: inline-flex;
    flex-flow: row nowrap;
    min-height: 81px;
    justify-content: space-between;
    margin: 0;
    /* padding: 6px 0; */
    padding: 0.75rem 2.5rem;
    position: relative;
    transition: all 375ms ease;
    z-index: 5;

    &:after {
      --background: inherit;
      --border: inherit;

      backface-visibility: hidden;
      background-color: var(--background);
      border: 3px solid var(--border);
      box-sizing: content-box;
      content: '';
      display: block;
      height: calc(100% - 0.375rem);
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: all 375ms ease;
      width: calc(100% - 0.375rem);
      z-index: -1;
    }

    &:hover {
      color: var(--hover-color);
      text-decoration: none;

      &:after {
        background: var(--hover-background);
        border-color: var(--hover-border);
        padding: 0.3125rem;
      }
    }

    &.red {
      --background: #e31a4c;
      --border: #e31a4c;
      --color: #fff;
      --focus-border: #231f20;
      --hover-background: #b31257;
      --hover-border: #b31257;
      --hover-color: #fff;
      --icon-background: transparent;
    }
  }

  .font-intro {
    color: var(--secondary-navy);
    span {
      margin-right: -1ch;
      padding: 0 0.75ch 0 4px;

      &:last-child {
        margin-right: 0;
        padding-right: 4px;
      }
    }
  }

  .user-markup {
    overflow: visible;
  }

  .wysiwyg__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  [class*='media--view-mode'] {
    container-name: media-wrapper;
    container-type: inline-size;

    &[class*='full_width'] {
      margin: 10px 0;
      width: 100%;

      &.align-left,
      &.align-right {
        float: none;
        padding: 0;
      }
    }

    &[class*='half_width'] {
      width: 100%;

      @container (width > 600px) {
        width: 50%;
      }
    }

    &.align-left {
      float: left;
      padding-right: 1rem;
    }

    &.align-right {
      float: right;
      padding-left: 1rem;
    }

    &.align-center {
      display: block;
      margin-inline: auto;
    }
  }
}