@layer components {
  .columns {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    max-width: var(--max-reach-lg-x2);

    @media (width >= 64rem) {
      flex-direction: row;
      max-width: var(--max-reach-lg-x8);
      margin: var(--length-12) auto;
      gap: var(--length-6);
      padding-inline: var(--space-sm-x1);
    }
  }

  .columns__content {
    padding-inline: var(--space-sm-x1);
    line-height: var(--leading-relaxed);

    h2 {
      color: var(--color-primary-6);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-lg-x2);
      margin-block: var(--length-3);
    }

    h3 {
      color: var(--color-primary-6);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-lg-x1);
      margin-block: var(--length-3);
      text-wrap: pretty;
    }

    p {
      font-size: var(--font-size-md);
      margin-block: var(--length-3);
    }

    @media (width >= 64rem) {
      order: 1;
      padding-top: var(--length-1);
      padding-bottom: var(--length-6);
    }
  }

  .columns__header {
    h1 {
      color: var(--color-primary-7);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-lg-x5);
    }

    h2 {
      font-size: var(--font-size-lg-x1);
      margin: 0;
    }
  }

  .columns__list {
    list-style-type: disc;
    padding-left: var(--length-5);

    li {
      margin-top: var(--length-4);
    }

    li:first-child {
      margin-top: 0;
    }
  }

  .columns__video {
    margin: var(--length-8) var(--length-1);
  }

  .columns__image {
    margin: var(--length-8) var(--length-1);
    aspect-ratio: 16 / 9;
    overflow: hidden;

    button img {
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
  }

  .columns__play-button {
    padding: var(--length-4);
    background: var(--color-white);
    border-radius: var(--border-radius-round);
    color: black;
    position: absolute;
    top: calc(100% / 2);
    left: calc(100% / 2);
    translate: calc(100% / 2 * -1) calc(100% / 2 * -1);

    svg {
      width: var(--length-8);
      height: var(--length-8);
    }
  }
}