/* basic card */
/* grid */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5em;
}
.card {
    --duration: 0.4s;
    display: grid;
    box-shadow: var(--shadow--sm);
    border-radius: var(--radius--md);
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: box-shadow var(--duration);
}

.card__media {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: inherit;
}
.card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--duration);
}
.card__content {
    display: grid;
    gap: 1em;
    padding: 1em;
}
.card__title {
    font-size: 1em;
}
.card__text {
    font-size: 0.9em;
    opacity: 0.7;
    margin-top: -0.25lh;
}
.card__footer {
    display: flex;
    justify-content: end;
}
.card__link {
    text-decoration: none;
    font-size: 0.8em;
    opacity: 0.6;
    transition: opacity var(--duration);
}
.card__arrow {
    display: inline-flex;
    transition: translate var(--duration);
}

/* card link */
.card__footer,
.card__link {
    position: static;
}
.card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

@media (any-hover: hover) {
    .card:hover {
        box-shadow: var(--shadow--lg);
    }

    .card:hover .card__link {
        opacity: 1;
    }

    .card:hover .card__arrow {
        translate: 4px 0;
    }
}

.card:focus-within {
    box-shadow: var(--shadow--lg);
}
.card:focus-within .card__link {
    opacity: 1;
}
.card:focus-within .card__arrow {
    translate: 4px 0;
}


/* media zoom */
.card--zoom .card__media > img {
    filter: grayscale(0.6) contrast(1.05) brightness(0.95);
}

@media (any-hover: hover) {
    .card--zoom > .card:hover .card__media > img {
        scale: 1.15;
        filter: grayscale(0) contrast(1) brightness(1);
    }
}

.card--zoom > .card:focus-within .card__media > img {
    scale: 1.15;
    filter: grayscale(0) contrast(1) brightness(1);
}