.cards-grid {
    overflow-x: clip;
}

.cards-grid__header {
    align-items: flex-start;
}

.cards-grid__list {
    --gap: 2rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.cards-grid-item {
    display: flex;
    width: 100%;
    flex: calc(100% / 3 - var(--gap));
    position: relative;
    z-index: 1;
}

.cards-grid-item__inner {
    gap: 3rem;
    padding: 4.5rem 4.9rem;
    background: color-mix(in srgb, var(--color-surface) 30%, transparent);
}

.cards-grid-item__image {
    --shift: -15%;

    position: absolute;
    z-index: -1;
    opacity: 0;
    filter: blur(1rem);
    transition: 0.6s ease-out;
}

.cards-grid-item__image.top-left {
    left: var(--shift);
    top: var(--shift);
}

.cards-grid-item__image.top-right {
    right: var(--shift);
    top: var(--shift);
}

.cards-grid-item__image.bottom-left {
    left: var(--shift);
    bottom: var(--shift);
}

.cards-grid-item__image.bottom-right {
    right: var(--shift);
    bottom: var(--shift);
}

@media (hover: hover) and (pointer: fine) {
    .cards-grid-item:hover .cards-grid-item__image {
        filter: blur(0);
        opacity: 1;        
    }
}

@media (hover: none) {
    .cards-grid-item:active .cards-grid-item__image {
        filter: blur(0);
        opacity: 1;        
    }
}

@media screen and (max-width: 767.9px) {
    .cards-grid-item {
        flex: calc(100% / 2 - var(--gap));
    }
}

@media screen and (max-width: 575.9px) {
    .cards-grid-item {
        flex: 100%;
        width: 100%;
    }

    .cards-grid-item__image,
    .cards-grid-item__inner {
        width: 100%;
    }

    .cards-grid-item:first-child .cards-grid-item__image,
    .cards-grid-item:last-child .cards-grid-item__image {
        filter: blur(0);
        opacity: 1;
    }

    .cards-grid-item__inner {
        padding: 4rem 2.4rem;
    }
}