.volumes-section { padding: 40px 0; }
.volumes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.volume-card {
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    padding: 12px 20px;
    text-decoration: none;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 1;
}

.volume-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.04;
    right: -40px;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

.volume-card:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.volume-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.volume-stats {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.volume-stats span i { margin-right: 6px; }

@media (max-width: 920px) { .volumes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
    .volume-title{ font-size: 17px; }
    .volume-stats{ font-size: 11px; }
    .volumes-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) { .volumes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .volumes-grid { grid-template-columns: repeat(1, 1fr); } }