/* Compact magazine covers and a two-row, free-scrolling photo canvas. */
.public-albums {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.public-album-image {
    aspect-ratio: 4 / 3;
    border-color: rgba(185, 133, 255, 0.34);
}

.public-album-info {
    display: block;
    padding-top: 7px;
    font-size: 11px;
    line-height: 1.35;
}

.public-album-info span:first-child { display: block; color: #d7bcff; }
.public-album-info span:last-child {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #85818a;
    font-size: 9px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-photo-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-columns: max-content;
    align-items: stretch;
    height: clamp(500px, 78vh, 820px);
    gap: 26px 28px;
    scroll-snap-type: none;
}

.public-photo {
    height: 100%;
    max-width: min(70vw, 860px);
    scroll-snap-align: none;
}

.public-photo:nth-child(even) { transform: translateY(18px); }
.public-photo:nth-child(4n) { transform: translateY(-12px); }
.public-photo-image { max-width: min(70vw, 860px); }

@media (max-width: 1050px) {
    .public-albums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .public-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .public-photo-grid { height: clamp(470px, 72vh, 680px); gap: 20px; }
    .public-photo { height: 100%; max-width: 78vw; }
    .public-photo-image { max-width: 78vw; }
}

@media (max-width: 600px) {
    .public-photo-grid { height: clamp(410px, 70vh, 560px); gap: 16px; }
    .public-photo { height: 100%; max-width: 84vw; }
    .public-photo-image { max-width: 84vw; }
    .public-photo:nth-child(even) { transform: translateY(10px); }
    .public-photo:nth-child(4n) { transform: translateY(-7px); }
}