/*
 * Two donors in one section, both riding partials/cards-slider.php
 * (00-slider.css owns the paging mechanics and the three-up slide size via
 * `.slider--cards-3`): `included` reuses the feature-card
 * (19-feature-card.css owns the card itself), `certificates` rides its own
 * card (partials/certificate-card.php, styled below) - a row on desktop,
 * one swipeable card on mobile, same as `included` above it.
 */

.course-included {
    padding: 3vw 0;
    background: var(--color-surface-muted);
}

.course-included__certificates {
    margin-top: 3vw;
}

.certificate-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.25vw;
    background: var(--color-surface);
}

.certificate-card__photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    margin: 0 0 1.25vw;
}

.certificate-card__title {
    font-size: 1.15vw;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

@media only screen and (max-width: 767.98px) {
    .course-included {
        padding: 6vw 0;
    }

    .course-included__certificates {
        margin-top: 8vw;
    }

    .certificate-card {
        padding: 4vw;
    }

    .certificate-card__photo {
        margin: 0 0 4vw;
    }

    .certificate-card__title {
        font-size: 4.8vw;
        margin: 0;
    }
}