.masonry-wrapper { padding: 40px 32px; background: #f7f5f2; }

.masonry { display: flex; gap: 10px; align-items: flex-start; }

.col { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.photo { width: 100%; border-radius: 6px; overflow: hidden; }

    .photo img { width: 100%; height: auto; display: block; }

    .photo.h-sm img { height: 160px; object-fit: cover; }

    .photo.h-md img { height: 220px; object-fit: cover; }

    .photo.h-lg img { height: 300px; object-fit: cover; }

    .photo.h-xl img { height: 380px; object-fit: cover; }

.logo-card { width: 100%; border-radius: 6px; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 24px; gap: 16px; height: 300px; }

    .logo-card img { max-width: 100%; width: 180px; height: auto; display: block; object-fit: contain; }

    .logo-card p { font-family: var(--font-heading); font-style: italic; font-weight: var(--fw-regular); font-size: 1rem; color: #fff; line-height: 1.35; }

    .logo-card .year { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; }

@media (max-width: 1200px) {
    .masonry-wrapper { padding: 32px 24px; }
    .masonry { gap: 8px; }
    .col { gap: 8px; }
}

@media (max-width: 992px) {
    .masonry { flex-wrap: wrap; }
    .col { flex: 0 0 calc(50% - 5px); }
}

@media (max-width: 768px) {
    .masonry-wrapper { padding: 24px 20px; }
    .masonry { flex-direction: column; }
    .col { width: 100%; flex: 0 0 100%; }
    .photo.h-md img { height: 200px; }
    .photo.h-lg img { height: 260px; }
    .logo-card { height: 260px; padding: 36px 20px; }
}

@media (max-width: 576px) {
    .masonry-wrapper { padding: 20px 16px; }
    .photo.h-sm img { height: 140px; }
    .photo.h-md img { height: 180px; }
    .photo.h-lg img { height: 220px; }
    .logo-card { height: 240px; padding: 32px 18px; }
    .logo-card img { width: 150px; }
    .logo-card p { font-size: 1rem; }
}

@media (max-width: 400px) {
    .masonry-wrapper { padding: 16px 12px; }
    .masonry { gap: 6px; }
    .col { gap: 6px; }
}