.cards-grid {
    color: var(--color-secondary);
}

.cards-grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

[data-current-variation="2"].cards-grid .cards-grid__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

[data-current-variation="3"].cards-grid .cards-grid__list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.cards-grid-item {
    width: 100%;
    padding: 4rem;
    gap: 1.5rem;
    border: 0.1rem solid var(--color-surface);
    border-radius: 1rem;
    height: 100%;
    transition: var(--trans);
}

.cards-grid-item__image {
/*    width: 4rem;
    aspect-ratio: 1/1;*/
    width: max-content;
    aspect-ratio: 1;
    margin-bottom: 2.5rem;

    background: currentColor;
    -webkit-mask: var(--image-url) no-repeat center;
    mask: var(--image-url) no-repeat center;
    mask-size: contain;
}

.cards-grid-item__image img,
.cards-grid-item__image svg {
    opacity: 0;
}

.cards-grid-item__title {
    font-weight: 700;
}

.cards-grid-item path {
    transition: var(--trans);
    stroke: var(--color-secondary);
}

.cards-grid .swiper-slide {
    display: flex;
    height: auto;
}

.cards-grid .swiper-slide .cards-grid-item {
    width: 33.5rem;
}

@media (hover: hover) and (pointer: fine) {
    .cards-grid-item:hover {
        background: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--color-text);
    }

    .cards-grid-item:hover .cards-grid-item__image,
    .cards-grid-item:hover .cards-grid-item__title {
        color: var(--color-primary);
    }
}

@media screen and (max-width: 1024.9px) {
    .cards-grid-item {
        background: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--color-text);
    }

    .cards-grid-item:active .cards-grid-item__image,
    .cards-grid-item:active .cards-grid-item__title {
        color: var(--color-primary);
    }
}