/* Showcase, reviews, blog, and overlays pages. */

/* Eyebrows sit at the start of stacked copy instead of stretching across it. */
.mk .mk-stack > .mk-eyebrow { justify-self: start; }

/* Showcase */

.showcase-photos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.showcase-photos img { aspect-ratio: 3 / 2; }
.showcase-setups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.showcase-setups img { box-shadow: var(--mk-shadow); }
.showcase-setups figcaption a { color: var(--mk-ink); font-weight: 600; text-decoration: none; }
.showcase-setups figcaption a:hover { color: var(--mk-teal-text); text-decoration: underline; }

/* Blog */

.blog-featured { gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .blog-featured { grid-template-columns: 1.1fr 1fr; } }
.blog-featured__media { overflow: hidden; border-radius: var(--mk-radius-s); background: var(--mk-surface-alt); }
.blog-featured__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-list { margin-top: clamp(24px, 4vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.blog-list .mk-card__media img { aspect-ratio: 16 / 9; }
.post-media { margin-block: clamp(28px, 5vw, 48px); }
.mk .post-footer { margin-top: 48px; }

/* Overlays */

.overlay-checkerboard {
  background-color: #fff;
  background-image: conic-gradient(#eef1f1 25%, #fff 0 50%, #eef1f1 0 75%, #fff 0);
  background-size: 20px 20px;
}
.overlay-card .mk-card__media img { aspect-ratio: 3 / 2; object-fit: contain; }
.mk .overlays-heading { margin-bottom: clamp(24px, 4vw, 40px); }
.mk .overlays-make { margin-bottom: 0; }
.overlay-detail__occasions { justify-content: flex-start; }
.overlay-detail__preview { overflow: hidden; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow-lift); }
.overlay-detail__preview img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }

/* Refer */