/* Media block: a picture beside a heading, words and a button, on the side
   the organizer chose (data-side start or end); stacked on a phone */
.media-block {
  align-items: center;
  display: grid;
  gap: var(--space-m-l);
}

.media-block__picture {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  inline-size: 100%;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .media-block[data-picture="true"] {
    grid-template-columns: 1fr 1fr;
  }

  .media-block[data-side="end"] .media-block__picture {
    order: 2;
  }
}

/* The style's pictures (data-look-images): mono in black and white, duotone
   in the accent (picture-filters.css) */
[data-look-images="mono"] .media-block__picture {
  filter: grayscale(1) contrast(1.06);
}

[data-look-images="duotone"] .media-block__picture {
  filter: contrast(1.1) url(#shop-duotone);
}