.block-media-mixed {
  inline-size: 100%;
  background-color: $color-white;

  .grid-container {
    display: grid;
    row-gap: $spacing-xl;

    @include media-down(md) {
      row-gap: $spacing-md;
    }
  }

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    row-gap: $spacing-xsm;
  }

  &__content {
    display: grid;
    @include grid-cols(12);

    &:not(:has(figure)) {
      gap: 0
    }

    &-media {
      display: flex;
      @include col-span(6);

      @include media-down(lg) {
        @include col-span(0);
      }

      &-wrap {
        position: relative;
        height: fit-content;
        width: occupies(5, 6);

        @include media-down(xl) {
          width: 100%;
        }

        .cta {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }

        figure {
          height: fit-content;
          // aspect-ratio: 16 / 9;

          img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            object-fit: contain;
            margin: auto;
          }
        }

        &[style*="--width"] {
          figure img {
            max-width: calc(var(--width) * 1px);
          }
        }
      }

      figure {
        &.media {
          width: 100%;
          height: fit-content;
          aspect-ratio: 16 / 9; 

          &.lightbox {
            iframe {
              pointer-events: none;
            }
          }
        }
      }
    }

    &-text {
      @include col-span(6);

      @include media-down(lg) {
        @include col-span(0);
      }
    }
  }

  &--image-text & {
    &__content {
      &-media {
        order: 1;
        justify-content: left;        
      }

      &-text {
        order: 2;
      }
    }
  }

  &--text-image & {
    &__content {
      &-media {
        order: 2;
        justify-content: right;
      }

      &-text {
        order: 1;
      }
    }
  }
}