@media (max-width: 768px) {

    .cards {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .card {
        font-size: 12px;
        padding: 12px;
        text-align: center;
    }

    .cards-photo {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .card-link {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 140px;
        border-radius: 15px;
        overflow: hidden;
        background: var(--color-secondary);
    }

    .card-overlay {
        position: static; 
        background: var(--color-secondary);

        width: 60%;
        padding: 15px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }

    /* TEXTO */
    .card-overlay h3 {
        font-size: 15px;
        text-align: left;
    }

    .card-img img {
        width: 40%;
        height: 100%;
        object-fit: cover;
    }

    .card-btn {
        font-size: 13px;
        color: #ccc;
    }

    .card-img:hover {
        transform: none;
        box-shadow: none;
    }


}