/*
  Image Container — Website Refresh 2026 1e (Figma), "Image" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=29-1432

  Requires tokens.css to be loaded first.

  Figma's instances show fixed pixel sizes (e.g. 396x223 for 16:9),
  but that's just the demo swatch size — this container is meant to
  sit inside content blocks of varying widths, so ratio is
  implemented with CSS aspect-ratio + width:100% instead of a fixed
  size, letting it size to whatever wraps it.
*/

.rs-image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.rs-image-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.rs-image-container--16-9 {
  aspect-ratio: 16 / 9;
}

.rs-image-container--4-3 {
  aspect-ratio: 4 / 3;
}

.rs-image-container--1-1 {
  aspect-ratio: 1 / 1;
}

.rs-image-container--rounded {
  border-radius: var(--space-8);
}

/*
  Media Container — a thin wrapper adding a fixed bottom gap (20px)
  below an Image Container, for when media sits above other content
  in a stack (e.g. inside List Block/Feature) and needs consistent
  spacing without the following element having to know about it.
*/
.rs-media-container {
  padding-bottom: var(--space-20);
}