.Cards {
    container-type: inline-size;

    & > .cardsContainer {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--gap-big);
    }
}

@container (max-width: 45rem) {
    .cardsContainer {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@container (max-width: 35rem) {
    .cardsContainer {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@container (max-width: 25rem) {
    .cardsContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@container (max-width: 15rem) {
    .cardsContainer {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.Card {
    --localPadding: var(--base-gap);
    --borderColor: var(--color-base-faintest-2);
    --maxTitleLines: 4;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    border-radius: var(--border-radius);

    box-sizing: border-box;

    background: var(--color-base-faintest-3);
    /* box-shadow: 0 0px 10px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness), 10%); */
    border: solid var(--borderColor) 1px;

    & > .imageContainer {
        background: var(--color-background);
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);

        & > .image {
            background: var(--color-background);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;

            height: 150px;

            border-radius: var(--border-radius);
            overflow: hidden;
        }

        padding: var(--base-gap);
    }

    & > .content {
        flex-grow: 1;

        padding: var(--localPadding);

        & > .title {
            word-break: break-word;
            font-size: var(--font-size-smaller);
            line-height: var(--font-line-height);

            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: var(--maxTitleLines);
                    line-clamp: var(--maxTitleLines);
            -webkit-box-orient: vertical;
        }
    }

    & > .Gauge > .markers {
        border-radius: 0;
    }

    & > .badges {
        position: absolute;
        top: calc(var(--base-gap) * .5);
        right: calc(var(--base-gap) * .5);
    }
}

a.Card {
    color: var(--color-base);
    text-decoration: none;

    &:hover {
        --borderColor: var(--color-base-faintest);
    }

    &:active {
        --borderColor: var(--color-base-fainter);

        & > .imageContainer > .image {
            filter: brightness(1.05);
        }
    }
}