.ccp-video-container-content {
  background: var(--tertiary-black);
  padding-top: 40px;
  padding-bottom: 56px;
  @media (min-width: 768px) {
    padding-top: 64px;
    padding-bottom: 88px;
  }
  .ccp-video__text {
    color: var(--tertiary-white);
    font-family: var(--body-font-family);
    font-style: normal;

    .ccp-video__pretitle :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--body-font-size-s);
      font-style: italic;
      font-weight: var(--fw-400);
      line-height: var(--heading-lh-14-mob-sub-heading);
      letter-spacing: 0.36px;
      margin: 0;
      @media (min-width: 768px) {
        font-size: var(--heading-font-14-des);
        line-height: var(--heading-lh-24-des);
        letter-spacing: 0.52px;
      }
    }
    .ccp-video__title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--body-font-size-xl);
      font-weight: var(--fw-500);
      line-height: var(--heading-lh-11-mob-display);
      letter-spacing: 0.64px;
      margin-top: 0;
      margin-bottom: 32px;
      @media (min-width: 768px) {
        font-size: var(--heading-font-size-xl);
        line-height: var(--heading-lh-4-des-display);
        letter-spacing: var(--space-1px);
        margin-bottom: 36px;
      }
    }
    .ccp-video__desc :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--body-font-size-xxs);
      font-weight: var(--fw-300);
      line-height: var(--heading-lh-19-mob-text-small);
      margin-top: 24px;
      @media (min-width: 768px) {
        font-size: var(--body-font-size-xs);
        margin-top: 36px;
      }
    }
  }
  .ccp-video__text--desktop .ccp-video__desc {
    display: none;
    @media (min-width: 768px) {
      display: block;
    }
  }
  .ccp-video__text--mobile .ccp-video__desc {
    @media (min-width: 768px) {
      display: none;
    }
  }
  .ccp-video__video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    height: fit-content;
    @media (min-width: 768px) {
      aspect-ratio: 828/466;
    }
    .play-button-wrapper {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      .play-pause-button {
        content: '';
        display: inline-block;
        position: absolute;
        top: calc(50% - 24px);
        left: calc(50% - 24px);
        height: 48px;
        width: 48px;
        transform: scale(0.75);
        background: url('/icons/play-icon-36.svg') no-repeat;
        cursor: pointer;
        border: none;
      }
    }

    .mute-button-wrapper {
      position: absolute;
      bottom: 0;
      right: 0;
      button {
        content: '';
        height: 24px;
        width: 24px;
        border: none;
        cursor: pointer;
      }
      .mute-button {
        background: url('/icons/volume-on-icon.svg') no-repeat;
      }
      .unmute-button {
        background: url('/icons/volume-off-icon.svg') no-repeat;
      }
    }
  }
}