/**
 * @license MIT, https://opensource.org/license/MIT
 */

.cards .card-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

.cards .card-list.cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

@media screen and (max-width: 767px) {
    .cards .card-list {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
    }
}

@media screen and (min-width: 768px) {
    .cards .card-list {
        grid-auto-rows: 1fr;
    }
}

.cards .card-list.cols-1 {
    grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {
    .cards .card-list.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cards .card-list.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cards .card-list.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 992px) {
    .cards .card-list.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cards .card-item {
    transition: background-color 0.15s ease;
}

.cards .card-item:has(> picture.image) {
    display: flex;
    flex-direction: column;
}

.cards .card-item:nth-child(even) > picture.image {
    order: 1;
}

.cards .card-item:nth-child(odd) {
    background-color: var(--pico-contrast-background);
}

.cards .card-item:nth-child(even) {
    background-color: var(--pico-primary);
}

.cards .card-item:nth-child(odd):hover {
    background-color: var(--pico-contrast-hover-background);
}

.cards .card-item:nth-child(even):hover {
    background-color: var(--pico-primary-hover);
}

.cards .card-item picture.image {
    width: 100%;
    margin: unset;
    overflow: hidden;
}

.cards .card-item picture.image img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .cards .card-item:has(> picture.image) {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        height: 100%;
    }

    .cards .card-item:nth-child(even) > picture.image {
        grid-row: 2;
        order: 0;
    }

    .cards .card-item:nth-child(even) > .card-text {
        grid-row: 1;
    }

    .cards .card-item picture.image {
        height: 100%;
        min-height: 12rem;
    }

    .cards .card-item picture.image img {
        height: 100%;
        object-fit: cover;
    }
}

.cards .card-item .card-text {
    margin: 2rem;
}

.cards .title {
    font-family: var(--pico-font-family-display);
    font-size: calc(var(--pico-font-size) * 1.2);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 1rem 0;
}

.cards .card-item p {
    color: var(--pico-muted-color);
}

.cards .card-item:nth-child(even) h3,
.cards .card-item:nth-child(even) p {
    color: var(--pico-contrast-inverse);
}

.cards .card-item a {
    text-decoration: none;
}