.media {
  position: relative;
  background: var(--media-bg);
}

.media__columns {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-16);
  padding-inline: var(--space-24);
}

.media__columns span {
  border-inline: 1px solid var(--media-columns-color);
}

.media__composition {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: calc(100% + var(--space-24));
  translate: -50% -50%;
}


.media--centology-app {
  --media-bg: var(--color-case-accent-muted);
  --media-columns-color: color-mix(in srgb, var(--color-on-accent) 18%, transparent);
  overflow: hidden;
}

.media--centology-app .media__composition {
  top: auto;
  bottom: 0;
  aspect-ratio: 956 / 408;
  translate: -50% 0;
}

@media (width < 768px) {
  .media--centology-app .media__composition {
    top: 50%;
    bottom: auto;
    width: min(calc(366 / 340 * 100%), 366px);
    aspect-ratio: 366 / 311;
    max-width: none;
    translate: -50% -50%;
  }
}

@media (width >= 1024px) {
  .case-card--horizontal .media--centology-app .media__composition {
    top: 50%;
    bottom: auto;
    aspect-ratio: 366 / 311;
    max-width: none;
    translate: -50% -50%;
  }
}

.media--design-system,
.media--revive,
.media--this-site {
  overflow: hidden;
}

:is(.media--design-system, .media--revive, .media--this-site) .media__composition {
  top: auto;
  bottom: 0;
  aspect-ratio: 586 / 330;
  translate: -50% 0;
}

@media (width < 768px) {
  :is(.media--design-system, .media--revive, .media--this-site) .media__composition {
    top: 50%;
    bottom: auto;
    width: min(100%, 340px);
    aspect-ratio: 340 / 260;
    translate: -50% -50%;
  }
}

@media (width >= 768px) {
  .case-card:not(.case-card--horizontal) .media--centology-app .media__composition {
    width: calc(956 / 1198 * 100%);
  }

  .case-card:not(.case-card--horizontal) :is(.media--design-system, .media--revive, .media--this-site) .media__composition {
    width: 100%;
  }
}

@media (768px <= width < 1024px) {
  .case-card--horizontal .media--centology-app .media__composition {
    width: calc(956 / 1198 * 100%);
  }

  .case-card--horizontal :is(.media--design-system, .media--revive, .media--this-site) .media__composition {
    width: 100%;
  }
}

.media--design-system {
  --media-bg: var(--color-case-accent-muted);
  --media-columns-color: color-mix(in srgb, var(--color-on-accent) 18%, transparent);
}

.media--revive {
  --media-bg: var(--color-case-revive-muted);
  --media-columns-color: color-mix(in srgb, var(--color-on-accent) 18%, transparent);
}

.media--this-site {
  --media-bg: var(--color-ink);
  --dot-step: calc(var(--space-16) * 1.3125);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-code-token) 18%, transparent) 1px, transparent 1.25px); /* check:ignore */
  background-size: var(--dot-step) var(--dot-step);
}

.media--nda {
  --media-bg: var(--color-accent-tint);
  --media-columns-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}