/*
  Asset module settings
  ---------------------
  Each image module is identified by its data-asset value in index.html.
  Replace an image by changing only that module's src, width, height and alt.
  Crop behavior stays local here through --media-ratio, --media-fit and
  --media-position. Repeated campaign assets intentionally share one setting.
*/

.media-module {
  --media-ratio: auto;
  --media-fit: cover;
  --media-fit-mobile: var(--media-fit);
  --media-position: 50% 50%;
  --media-position-mobile: var(--media-position);
  aspect-ratio: var(--media-ratio);
  overflow: hidden;
}

.media-module > img {
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit);
  object-position: var(--media-position);
}

[data-asset="hero-original"] {
  --media-ratio: 4 / 5;
  --media-position: 50% 24%;
}

[data-asset="campaign-master"] {
  --media-ratio: 4 / 5;
  --media-fit: contain;
}

[data-asset="campaign-story"] {
  --media-ratio: 9 / 16;
  --media-fit: contain;
}

[data-asset="campaign-horizontal"] {
  --media-ratio: 16 / 9;
  --media-fit: contain;
}

[data-asset="environment-color"] {
  --media-ratio: 2048 / 1365;
}

[data-asset="environment-original"],
[data-asset="action-color"],
[data-asset="action-bw"],
[data-asset="detail-bw"],
[data-asset="portrait-bw"],
[data-asset="human-exit"] {
  --media-ratio: 1365 / 2048;
}

[data-asset="campaign-environment"] {
  --media-ratio: 4 / 5;
  --media-fit: contain;
}

[data-asset="mockup-environment"] {
  --media-ratio: 1122 / 1402;
  --media-fit: contain;
}

[data-asset="mockup-billboard"] {
  --media-ratio: 1672 / 941;
  --media-fit: contain;
}

[data-asset="mockup-citylight"] {
  --media-ratio: 3 / 2;
  --media-fit: contain;
}

[data-asset="mockup-digital"] {
  --media-ratio: 941 / 1672;
  --media-fit: contain;
}

@media (max-width: 620px) {
  .media-module > img {
    object-fit: var(--media-fit-mobile);
    object-position: var(--media-position-mobile);
  }
}