/* Page-level composites: bonus grid, app grid helpers, misc. */

/* --- Bonus cards grid (bonus page) --- */
.bonus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-card-gap);
}

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

.bonus-card .bonus-grid__img {
    width: 100%;
    height: auto;
    /* Полное отображение картинки бонуса, без обрезания */
    object-fit: contain;
}

.bonus-card__body {
    padding: var(--pad-card);
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.bonus-card__title {
    color: var(--color-heading);
    margin: 0;
}

.bonus-card__body p {
    margin: 0;
}

.bonus-card__btn {
    margin-top: 0.25rem;
    justify-self: start;
}

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

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

/* --- On very wide screens content images stay readable, never cropped --- */
.content-section__img {
    margin-inline: auto;
}