/*
 * Image frames (components/media-frame): fixed aspect ratios reserve the
 * space before an image loads (no layout shift), and images sit on a quiet
 * mat, contained and never cropped while Q-039 is open (--ru-media-fit).
 */

.ru-ratio--portrait {
    aspect-ratio: 4 / 5;
}

.ru-ratio--landscape {
    aspect-ratio: 4 / 3;
}

.ru-ratio--square {
    aspect-ratio: 1 / 1;
}

.ru-ratio--wide {
    aspect-ratio: 16 / 9;
}

.ru-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--ru-color-mat);
}

.ru-media__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--ru-media-fit);
    transition: transform var(--ru-duration-media) var(--ru-ease-out);
}

/* The mat: an even margin of ground around the work, like a mount. */
.ru-media--mat .ru-media__image {
    inset: var(--ru-media-mat);
    width: calc(100% - 2 * var(--ru-media-mat));
    height: calc(100% - 2 * var(--ru-media-mat));
}

/* A frame with no image: the name set in type, never implied imagery. */
.ru-media--type {
    display: flex;
    align-items: flex-end;
    padding: clamp(1.25rem, 6%, 2.5rem);
    background: var(--ru-color-mat);
}

.ru-media__name {
    font-family: var(--ru-font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.05;
    color: var(--ru-color-text-secondary);
    overflow-wrap: anywhere;
}

/* Dark grounds use a darker mat so the artwork, not the frame, is lit. */
.ru-on-dark .ru-media {
    background: #221d18;
}

/* On the beige alternate ground the mat turns ivory, so the frame keeps
   its edge. */
.ru-section--alt .ru-media {
    background: var(--ru-color-bg);
}