.card-container {
    display: flex;
    flex-direction: row;

    justify-content: center;

    gap: 1.5rem;

    max-width: var(--content-max-wide);
    width: 100%;
    margin-inline: auto;

    padding-inline: 1.5rem;
}

.card-container.content-width-wide {
    max-width: var(--content-max-wide);
}

.card-container.content-width-reading {
    max-width: var(--content-max-reading);
}

.card-container.content-width-narrow {
    max-width: var(--content-max-narrow);
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: relative;
    flex: 1 1 0;

    padding: 1.5rem;
    gap: 10px;

    font-family: var(--font-family);
    color: var(--fg);
    text-decoration: none;

    background: var(--card);
    background-position: center;
    background-size: cover;
    border-radius: 1.5rem;

    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

    transition: transform var(--hover-duration) var(--hover-ease), filter var(--hover-duration) var(--hover-ease);
    overflow: visible;
}

.card:hover {
    transform: translateY(var(--hover-lift-card));
    filter: brightness(1.03);
}

.acc-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex: 1 1 0;

    padding: 1.5rem;
    gap: 10px;

    font-family: var(--font-family);
    color: var(--fg);
    text-decoration: none;

    background: var(--acc-card);
    border-radius: 1.5rem;

    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

    transition: transform var(--hover-duration) var(--hover-ease), filter var(--hover-duration) var(--hover-ease);
}

.acc-card:hover {
    transform: translateY(var(--hover-lift-card));
    filter: brightness(1.03);
}

.card-icon {
    color: var(--fg);
    margin-right: 0.4rem;
}

.card-logo {
    position: relative;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    height: 150px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

@media (max-width: 1000px) {
    .card-container {
        flex-direction: column;
        align-items: stretch;
        margin-inline: 1.5rem;
        padding-inline: 0;
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .card-container {
        margin-inline: 0;
        gap: 1rem;
    }

    .card {
        padding: 1.25rem;
    }

    .card-logo {
        width: 120px;
        height: 120px;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .card-container {
        gap: 0.75rem;
    }

    .card {
        padding: 1rem;
    }

    .card-logo {
        width: 100px;
        height: 100px;
        margin-top: 0.5rem;
    }
}