.course-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.course-card {
    flex: 0 1 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
    will-change: transform;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
        linear-gradient(
            135deg,
            rgba(47, 109, 253, 0.55),
            rgba(255, 122, 26, 0.45),
            rgba(47, 109, 253, 0.35)
        )
        border-box;
}

.course-card__content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    z-index: 2;
    flex: 1;
    justify-content: end;
}

.course-card__actions {
    margin-top: 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    border-top: 1px solid var(--border, #e0e6f5);
    padding-top: 12px;
}

.course-card__age {
    margin: 0;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #e0e6f5);
}

.course-card__age strong {
    font-weight: 800;
}

.course-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow:
        var(--shadow, 0 18px 40px rgba(30, 43, 79, 0.12)),
        0 34px 70px rgba(47, 109, 253, 0.32),
        0 14px 28px rgba(47, 109, 253, 0.18);
}

.course-card.is-focus {
    transform: translateY(-8px) scale(1.03);
    box-shadow:
        var(--shadow, 0 18px 40px rgba(30, 43, 79, 0.12)),
        0 34px 70px rgba(47, 109, 253, 0.32),
        0 14px 28px rgba(47, 109, 253, 0.18);
}

.course-card__media {
    position: relative;
    width: 100%;
    z-index: 2;
    background: var(--surface, #fff);
    border-radius: 14px;
    overflow: hidden;
}

.course-card__media img {
    width: 100%;
    height: auto;
    display: block;
}

.course-card__extra-text {
    margin: auto 0 0;
    width: 100%;
    min-height: 1.4em;
}

.course-card__content .button {
    width: 100%;
    align-self: stretch;
    border-radius: 14px;
    font-weight: 800;
}

.course-card__actions .button {
    margin-top: 12px;
}

.course-card__actions .button:first-child {
    margin-top: 0;
}