/*
 * depo0 — page styles of /depo-magazine: the "depo magazine" part of front/public/css/pages/marketing.css
 * (templates/marketing/depo_magazine.php); .mk-banner, .mk-hero, .mk-cta, .mk-list are in site.css.
 */
/* ── depo magazine ──────────────────────────────────────────────────── */
.mk-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; padding: clamp(20px, 4vw, 40px); align-items: center; }
.mk-about__image { width: 100%; border-radius: var(--radius); }
.mk-about__text { display: grid; gap: 12px; line-height: 1.7; }
.mk-about__text p { margin: 0; }
@media (max-width: 767px) { .mk-about { grid-template-columns: 1fr; } }
.mk-issues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 991px) {
    .mk-issues { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .mk-issue { scroll-snap-align: start; }
}
.mk-issue { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mk-issue img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.mk-issue h3 { font-size: 15px; }

/* depo0 always loads globals.css (the site loads it only on legacy pages): undo its `.btn { width: 140px }`. */
.mk-page .btn { width: auto; }