.card-container {
    margin-block-end: var(--size-base);
}

.card {
    width: calc(var(--size-base) * 21.767);
    height: calc(var(--size-base) * 29.467);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-gap);
}

.card--sedan {
    background-color: var(--color-primary-1);
    border-top-left-radius: var(--border-radius-card);
    border-top-right-radius: var(--border-radius-card);
}

.card--suv {
    background-color: var(--color-primary-2);
}

.card--luxury {
    background-color: var(--color-primary-3);
    border-bottom-left-radius: var(--border-radius-card);
    border-bottom-right-radius: var(--border-radius-card);
}

.card__content {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.card__icon {
    width: var(--icon-width);
    height: var(--icon-height);
    object-fit: contain;
}

.card__title {
    font-size: calc(var(--size-base) * 2.533);
    font-family: var(--font-family-big-shoulders);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.card__description {
    line-height: calc(var(--size-base) * 1.667);
    color: var(--color-neutral-1);
}

.card__button {
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    background-color: var(--color-neutral-2);
    border-radius: var(--border-radius-button);
}

.card__button:hover,
.card__button:focus {
    background-color: transparent;
    color: var(--color-neutral-2);
    border: 0.125rem solid var(--color-neutral-2);
}

.card--sedan .card__button {
    color: var(--color-primary-1);
}

.card--suv .card__button {
    color: var(--color-primary-2);
}

.card--luxury .card__button {
    color: var(--color-primary-3);
}

.attribution {
    text-align: center;
    color: var(--color-neutral-3);
    margin-block-start: var(--size-base);
}

.attribution a {
    color: var(--color-link-footer);
    text-decoration: underline;
}