/* Class-card palettes are isolated from community event and featured-event cards. */
.events-grid > .class-card {
    background: linear-gradient(135deg, #7fd9f5 0%, #4fb4dc 100%) !important;
    border-left-color: #0a7399;
    color: #0e2a2f !important;
}

.events-grid > .class-card:nth-of-type(3n+2) {
    background: linear-gradient(135deg, #a86db0 0%, #7b4e99 100%) !important;
    border-left-color: #4b1f66;
    color: #fff !important;
}

.events-grid > .class-card:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #f2d26b 0%, #e9b94d 100%) !important;
    border-left-color: #946400;
    color: #2f2800 !important;
}

.events-grid > .class-card:nth-of-type(3n+2) .btn {
    background-color: #4a124d;
    color: #fff;
}

.events-grid > .class-card:nth-of-type(3n+2) .btn:hover,
.events-grid > .class-card:nth-of-type(3n+2) .btn:focus-visible {
    background-color: #350d38;
}

.events-grid > .class-card:nth-of-type(3n+3) .btn {
    background-color: #8a7a19;
    color: #fff;
}

.events-grid > .class-card:nth-of-type(3n+3) .btn:hover,
.events-grid > .class-card:nth-of-type(3n+3) .btn:focus-visible {
    background-color: #6f6214;
}

.events-grid > .class-card.class-card--past-light,
.events-grid > .class-card.class-card--past-light:nth-of-type(3n+2),
.events-grid > .class-card.class-card--past-light:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #e5e5e5 0%, #bdbdbd 100%) !important;
    border-left-color: #707070;
    color: #202020 !important;
}

.events-grid > .class-card.class-card--past-dark,
.events-grid > .class-card.class-card--past-dark:nth-of-type(3n+2),
.events-grid > .class-card.class-card--past-dark:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #595959 0%, #333 100%) !important;
    border-left-color: #1f1f1f;
    color: #fff !important;
}

.events-grid > .class-card.class-card--past .btn,
.events-grid > .class-card.class-card--past:nth-of-type(3n+2) .btn,
.events-grid > .class-card.class-card--past:nth-of-type(3n+3) .btn {
    background-color: #5e5e5e !important;
    color: #fff;
}

.events-grid > .class-card.class-card--past .btn:hover,
.events-grid > .class-card.class-card--past .btn:focus-visible,
.events-grid > .class-card.class-card--past:nth-of-type(3n+2) .btn:hover,
.events-grid > .class-card.class-card--past:nth-of-type(3n+2) .btn:focus-visible,
.events-grid > .class-card.class-card--past:nth-of-type(3n+3) .btn:hover,
.events-grid > .class-card.class-card--past:nth-of-type(3n+3) .btn:focus-visible {
    background-color: #444 !important;
}

.events-grid > .class-card.class-card--clag,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2),
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3),
.events-grid > .class-card.class-card--clag.class-card--featured,
.events-grid > .class-card.class-card--clag.class-card--past-light,
.events-grid > .class-card.class-card--clag.class-card--past-dark {
    background: linear-gradient(135deg, #668014 0%, #455a0d 100%) !important;
    border-left-color: #2f3d09;
    color: #fff !important;
}

.events-grid > .class-card.class-card--clag .marker-clag-event {
    background: rgba(255, 255, 255, 0.92);
    color: #455a0d;
}

.events-grid > .class-card.class-card--clag .event-instructor {
    background: rgba(255, 255, 255, 0.22);
}

.events-grid > .class-card.class-card--clag .btn,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2) .btn,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3) .btn,
.events-grid > .class-card.class-card--clag.class-card--featured .btn,
.events-grid > .class-card.class-card--clag.class-card--past .btn {
    background-color: #fff !important;
    color: #455a0d;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28);
}

.events-grid > .class-card.class-card--clag .btn:hover,
.events-grid > .class-card.class-card--clag .btn:focus-visible,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2) .btn:hover,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+2) .btn:focus-visible,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3) .btn:hover,
.events-grid > .class-card.class-card--clag:nth-of-type(3n+3) .btn:focus-visible,
.events-grid > .class-card.class-card--clag.class-card--featured .btn:hover,
.events-grid > .class-card.class-card--clag.class-card--featured .btn:focus-visible,
.events-grid > .class-card.class-card--clag.class-card--past .btn:hover,
.events-grid > .class-card.class-card--clag.class-card--past .btn:focus-visible {
    background-color: #e7f0c9 !important;
    color: #2f3d09;
}