/* ==========================================================================
   Bonus cards
   ========================================================================== */

.bonus-cards {
    display: grid;
    gap: var(--space-md);
}

.bonus-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.bonus-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--color-card);
    clip-path: var(--clip-cut);
}

/* Bonus artwork is always shown in full - never cropped. */
.bonus-card__media {
    display: grid;
    place-items: center;
    padding: var(--space-sm);
    background-color: var(--color-bg-dark);
}

.bonus-card__image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.bonus-card__body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-2xs);
    padding: var(--space-lg);
}

.bonus-card__title {
    font-size: var(--fs-h4);
}

.bonus-card__amount {
    color: var(--color-heading);
    font-weight: var(--fw-bold);
}

.bonus-card__cta {
    margin-top: var(--space-2xs);
    align-self: end;
    justify-self: start;
}

@media (min-width: 480px) {
    .bonus-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bonus-cards__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}