/**
 * Image / ratios — spec Placeholder 2:1778
 */
@use "../abstracts/variables" as v;

.#{v.class-seg()}media {
  position: relative;
  display: block;
  width: 100%;
  max-width: v.$media-width-base;
  overflow: hidden;

  img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.#{v.class-seg()}media--1-1 {
  aspect-ratio: 1 / 1;
}

.#{v.class-seg()}media--8-5 {
  aspect-ratio: 8 / 5;
}

.#{v.class-seg()}media--3-4 {
  aspect-ratio: 3 / 4;
  max-width: 11.25rem; /* 180px — spec */
}

.#{v.class-seg()}media--3-2 {
  aspect-ratio: 3 / 2;
}