/* Decorative article cameos: fixed geometry, no animation, no reader interaction. */
.article-cameo-anchor {
  display: block;
  width: 0;
  height: 0;
  scroll-margin-top: 260px;
}

.article-cameo {
  --cameo-desktop-width: 144px;
  --cameo-mobile-width: 84px;
  --cameo-aspect: 1 / 1;
  --cameo-gutter: 48px;
  --cameo-offset-y: -24px;
  box-sizing: border-box;
  display: block;
  pointer-events: none;
  scroll-margin-top: 260px;
  user-select: none;
}

.article-cameo img,
body.site-modern .article .article-cameo img {
  box-sizing: border-box;
  display: block;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  filter: none;
  object-fit: contain;
}

.article-cameo[data-placement="between"] {
  width: min(var(--cameo-desktop-width), 30vw);
  aspect-ratio: var(--cameo-aspect);
  margin: 52px auto 12px;
  contain: layout paint;
}

.article-cameo[data-placement="between"] img {
  width: 100%;
  height: 100%;
}

@media (min-width: 1360px) {
  .article-cameo[data-placement="side"] {
    position: relative;
    width: 100%;
    height: 0;
    margin: 0;
    overflow: visible;
  }

  .article-cameo[data-placement="side"] img {
    position: absolute;
    top: var(--cameo-offset-y);
    width: var(--cameo-desktop-width);
    height: auto;
    aspect-ratio: var(--cameo-aspect);
  }

  .article-cameo[data-placement="side"][data-side="left"] img {
    right: calc(100% + var(--cameo-gutter));
  }

  .article-cameo[data-placement="side"][data-side="right"] img {
    left: calc(100% + var(--cameo-gutter));
  }
}

@media (max-width: 1359px) {
  .article-cameo[data-mobile="hide"] {
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    contain: strict;
  }

  .article-cameo[data-mobile="hide"] img,
  body.site-modern .article .article-cameo[data-mobile="hide"] img {
    display: none;
  }

  .article-cameo[data-placement="side"][data-mobile="show"],
  .article-cameo[data-placement="between"]:not([data-mobile="hide"]) {
    position: static;
    width: min(var(--cameo-mobile-width), 24vw);
    height: auto;
    aspect-ratio: var(--cameo-aspect);
    margin: 38px auto 8px;
    contain: layout paint;
  }

  .article-cameo[data-placement="side"][data-mobile="show"] img,
  .article-cameo[data-placement="between"]:not([data-mobile="hide"]) img {
    position: static;
    width: 100%;
    height: 100%;
  }
}