.lista-de-cartilhas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 180px));
    justify-content: center;
    gap: 28px;
    padding: 12px 6px;

    .cartilha {
        width: 100%;
        aspect-ratio: 1 / 2;
        transition: transform 180ms ease, filter 180ms ease;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            transition: filter 180ms ease;
        }

        &:hover,
        &:focus-within {
            transform: scale(1.06);
            filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.2));
        }

        &:focus-within {
            outline: 3px solid #0d6efd;
            outline-offset: 4px;
        }
    }
}

@media (max-width: 767px) {
    .lista-de-cartilhas {
        grid-template-columns: repeat(2, minmax(0, 180px));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .lista-de-cartilhas {
        grid-template-columns: minmax(0, 180px);
    }
}