/* Foto's. Ze staan er om de nagebouwde schermen menselijk te maken,
   dus meestal in een stapel: foto onder, een stukje product erover. */

@layer components {
  .media {
    position: relative;
    border-radius: var(--radius);
    overflow: visible;
  }

  .media__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }

  .media--tall .media__image {
    aspect-ratio: 3 / 4;
  }

  .media--wide .media__image {
    aspect-ratio: 16 / 10;
  }

  /* Het kaartje valt over de foto heen, maar blijft binnen de
     kolombreedte -- anders steekt het de sectie uit en lijkt niets
     meer op één lijn te staan. */
  .media__overlay {
    position: relative;
    z-index: 1;
    margin-block-start: calc(var(--space-l) * -1);
    margin-inline: var(--space-s);
  }

  .media--overlay-right .media__overlay {
    margin-inline: var(--space-s);
  }

  @media (min-width: 56rem) {
    .media__overlay {
      position: absolute;
      inset-block-end: var(--space-s);
      inset-inline-start: var(--space-s);
      width: min(20rem, calc(100% - var(--space-l)));
      margin: 0;
    }

    .media--overlay-right .media__overlay {
      inset-inline: auto var(--space-s);
    }
  }

  /* Een rand met merkkleur onder de foto, zodat een lichte foto niet
     wegvalt tegen een lichte sectie. */
  .media--framed::before {
    content: '';
    position: absolute;
    inset: var(--space-s) calc(var(--space-s) * -1) calc(var(--space-s) * -1) var(--space-s);
    border-radius: var(--radius);
    background: var(--gradient-brand);
    opacity: 0.9;
  }

  .media--framed .media__image {
    position: relative;
  }

  /* Foto en tekst beginnen op dezelfde hoogte in een split. */
  .split > .media {
    align-self: start;
  }
}