.covers-section{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);

    .cover{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
        transition: scale 0.2s ease-in;
        img{
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: calc(1448/2048);
        }
        h2{
            margin: 0;
            bottom: 0;
            position: absolute;
            font-weight: 600;
            line-height: normal;
            padding-block: var(--space-md);
            text-align: left;
            padding-inline: var(--space-md);
            font-size: var(--font-size-base);
            background-color: rgba(255, 255, 255, 0.01);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            width: 100%;
            text-shadow: 0 0 5px #fff, 0 0 2px #fff;
        }
    }
    .cover:hover{
        scale: 1.03;
    }
}

@media (min-width: 400px) and (max-width: 699px) {
    .covers-section{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 700px) and (max-width: 949px) {
    .covers-section{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 950px) {
    .covers-section{
        grid-template-columns: repeat(4, 1fr);
    }
}