/* Explain: Layout utility classes for structure and spacing. */
/* ---------- Page container ---------- */
.wrap {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}
@media (min-width: 768px) {
    .wrap { padding-inline: 2.5rem; }
}

/* ---------- Masonry project grid ---------- */
.work-masonry {
    column-count: 1;
    column-gap: 0.9rem;
}
@media (min-width: 640px) {
    .work-masonry { column-count: 2; column-gap: 1rem; }
}
@media (min-width: 1024px) {
    .work-masonry { column-count: 3; column-gap: 1.1rem; }
}

.work-masonry .work-card {
    width: 100%;
    margin: 0 0 0.9rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
@media (min-width: 640px) {
    .work-masonry .work-card { margin-bottom: 1rem; }
}

.work-card.is-hidden {
    display: none;
}

/* ---------- Aspect ratio frames (font/utility independent) ---------- */
.ratio-wide { aspect-ratio: 16 / 10; }
.ratio-video { aspect-ratio: 16 / 9; }
.ratio-classic { aspect-ratio: 4 / 3; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-tall { aspect-ratio: 4 / 5; }