:root {
    --logo-card-color-1: #500a18;
    --logo-card-color-2: #3b0510;
    --logo-card-color-3: #221516;
    --logo-card-color-4: #cacacc;
    --logo-card-color-4-opacity: rgb(202, 202, 204, 0.7);
    --logo-card-color-5: #330e18;
    --logo-card-color-6: #FFF;

    --cards-grid-columns: 1fr 1fr 1fr;
    --cards-min-height: 350px;
    --cards-scale: 1.03;
    --cards-link-fs: 32px;
    --cards-link-fw: 400;
}

.cards__container {
    grid-template-columns: var(--cards-grid-columns);
    display: grid;
    width: 100%;
    gap: 0;
}

.cards__card {
    background-color: var(--logo-card-color-6);
    height: var(--cards-min-height);
    transition: var(--transition);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    display: flex;
}

.cards__card_logo {
    transition: var(--transition);
}

.cards__card:hover .cards__card_logo {
    scale: var(--cards-scale);
}

.cards__card.white {
    background-color: var(--logo-card-color-6);
}

.cards__card.light-vine {
    background-color: var(--logo-card-color-1);
}

.cards__card.grey {
    background-color: var(--logo-card-color-4);
}

.cards__card.dark {
    background-color: var(--logo-card-color-3);
}

.cards__card.vine {
    background-color: var(--logo-card-color-5);
}

.cards__card.dark-vine {
    background-color: var(--logo-card-color-2);
}

.link > a {
    font-family: "Poiret", Arial, sans-serif;
    font-weight: var(--cards-link-fw);
    color: var(--logo-card-color-4);
    font-size: var(--cards-link-fs);
    text-decoration: none;
    text-align: center;
}


@media only screen and (max-width: 1280px) {
    :root {
        --cards-min-height: 250px;
    }
}

@media only screen and (max-width: 960px) {
    :root {
        --cards-grid-columns: 1fr 1fr;
    }

    .cards__card:nth-child(3),
    .cards__card:nth-child(6),
    .cards__card:nth-child(7) {
        display: none;
    }
}

@media only screen and (max-width: 760px) {
    :root {
        --cards-min-height: 200px;
        --cards-link-fs: 28px;
    }
}

@media only screen and (max-width: 560px) {
    :root {
        --cards-min-height: 150px;
        --cards-link-fs: 24px;
    }
}

@media only screen and (max-width: 480px) {
    :root {
        --cards-min-height: 120px;
        --cards-link-fs: 20px;
    }
}