Media Blocks & Ratios

[data-media] {
  --column: wide;
  --list-padding--default: 1em;

  align-items: var(--align, start);
  display: grid;
  grid-gap: var(--media-gap, var(--gutter));
  grid-template-areas: var(--reverse-y, 'image' 'content');
  margin: var(--newline) 0;

  &[data-reverse~='vertical'] {
    --reverse-y: 'content' 'image';
  }

  @include config.above('wide-page') {
    grid-template-areas: var(--reverse-x, 'image content');
    grid-template-columns: fit-content(25%) minmax(
        min-content,
        var(--media-content, 1fr)
      );

    &[data-reverse~='horizontal'] {
      --reverse-x: 'content image';

      grid-template-columns: minmax(
          min-content,
          var(--media-content, 1fr)
        ) fit-content(25%);
    }
  }
}

.media-image {
  grid-area: image;
  justify-self: var(--media-justify, center);
  max-width: var(--media-max);
  min-width: var(--media-min);
  width: var(--media-size);

  img,
  svg {
    aspect-ratio: var(--media-ratio);
    object-fit: cover;
    block-size: auto;
    inline-size: 100%;
  }
}

.media-content {
  grid-area: content;

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

[data-ratio='parent'] {
  --ratio: #{config.ratio('_widescreen')};

  position: relative;

  &::before {
    content: '';
    display: inline-block;
    height: 0;
    padding-top: calc(100% / var(--ratio, #{config.ratio('_widescreen')}));
    width: 1px;
  }
}

[data-ratio='child'] {
  @include config.square(100%);

  inset: 0;
  position: absolute;
}