.pricing-classes {
    background: var(--wa-color-surface-default);
    padding-block: var(--wa-space-4xl);
    margin: 0;
}

/* ==========================================================================
   Container
   ========================================================================== */

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: var(--wa-space-l);
}

.pricing-classes__head {
    text-align: center;
    margin-bottom: var(--wa-space-2xl);
}

.pricing-classes__grid { --min-column-size: 16rem; align-items: stretch; }
@media (min-width: 48rem) {
    .pricing-classes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

wa-card.pricing-class {
    transition: transform 160ms ease;
    height: 100%;
}
wa-card.pricing-class:hover { transform: translateY(-2px); }

wa-card.pricing-class::part(base) {
    border-radius: calc(var(--wa-border-radius-l) * 1.25);
    border: 1px solid color-mix(in oklab, var(--wa-color-surface-border), transparent 65%);
    box-shadow: var(--wa-shadow-l);
    height: 100%;
}

wa-card.pricing-class::part(body) {
    height: 100%;
}

.pricing-class__body {
    padding: var(--wa-space-l);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
    height: 100%;
    min-height: 100%;
}

/* ==========================================================================
   Icon
   ========================================================================== */

wa-card.pricing-class {
    --pricing-icon-color: color-mix(in oklab, var(--class-color), black 35%);
}

.pricing-class__icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--wa-border-radius-pill);
    display: grid;
    place-items: center;
    margin-inline: auto;
    margin-bottom: var(--wa-space-s);
    background: color-mix(in oklab, var(--class-color), var(--wa-color-surface-default) 82%);
    color: var(--pricing-icon-color);
}

.pricing-class__desc {
    margin-bottom: auto;
}

.pricing-class__title {
    font-size: var(--wa-font-size-l);
    margin: 0;
    line-height: 1.25;
    min-height: calc(1.25em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pricing-class__desc {
    font-size: var(--wa-font-size-s);
    line-height: 1.35;
    min-height: calc(1.35em * 2);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pricing-class__action {
    width: 100%;
    margin-top: auto;
    justify-content: center;
}

.pricing-class__icon wa-icon {
    font-size: 2rem;
    color: var(--pricing-icon-color);
}

.pricing-class__icon-image {
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--pricing-icon-color);
    -webkit-mask-image: var(--pricing-icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--pricing-icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.pricing-class__icon-image--available-quiz-icon { --pricing-icon-url: url('/quiz-icons/available-quiz-icon-34f6e73a135e39aee07823d17dddac96.svg'); }
.pricing-class__icon-image--boat { --pricing-icon-url: url('/quiz-icons/boat-02eb1e31616033b91afbe53eee08b279.svg'); }
.pricing-class__icon-image--bus { --pricing-icon-url: url('/quiz-icons/bus-9dda9b4d9c76378a63018ef99f2371f9.svg'); }
.pricing-class__icon-image--car { --pricing-icon-url: url('/quiz-icons/car-a120a33b837ac723a83cfa4ea3c51deb.svg'); }
.pricing-class__icon-image--drone { --pricing-icon-url: url('/quiz-icons/drone-da19f4173273fe77ac1610d2327b0598.svg'); }
.pricing-class__icon-image--hunter { --pricing-icon-url: url('/quiz-icons/hunter-2c43eebbee2a69bec1ffdd470bdcb6a7.svg'); }
.pricing-class__icon-image--lgv { --pricing-icon-url: url('/quiz-icons/lgv-14c80d8bcf99a69b9243d23537168d6d.svg'); }
.pricing-class__icon-image--magnifying-glass { --pricing-icon-url: url('/quiz-icons/magnifying-glass-9bf9bf3a98c6732a47769f613d620a2b.svg'); }
.pricing-class__icon-image--moped { --pricing-icon-url: url('/quiz-icons/moped-f350004cc424e8016b43cf7d5b03f429.svg'); }
.pricing-class__icon-image--motorcycle { --pricing-icon-url: url('/quiz-icons/motorcycle-b21d91b81a040991a4f1f52d981a279f.svg'); }
.pricing-class__icon-image--pcv { --pricing-icon-url: url('/quiz-icons/pcv-bcb916145406d3bdb2c382189787b1bf.svg'); }
.pricing-class__icon-image--snowmobile { --pricing-icon-url: url('/quiz-icons/snowmobile-7ac4f77854cdb150ebfbcf11af3b724e.svg'); }
.pricing-class__icon-image--taxi { --pricing-icon-url: url('/quiz-icons/taxi-bc1a836d933b2fb6740c64c7a5e269a6.svg'); }
.pricing-class__icon-image--tractor { --pricing-icon-url: url('/quiz-icons/tractor-9ae28cae6dc08714518b20a8d66c220d.svg'); }
.pricing-class__icon-image--truck { --pricing-icon-url: url('/quiz-icons/truck-a8bffc29447eb3b28e2c20a46069d007.svg'); }
.pricing-class__icon-image--unavailable-quiz-icon { --pricing-icon-url: url('/quiz-icons/unavailable-quiz-icon-dd5ffcf950d1ed99e767467544a80f8d.svg'); }
.pricing-class__icon-image--yskfg { --pricing-icon-url: url('/quiz-icons/yskfg-4483a04d9b16436fbb96ea02ccdd1304.svg'); }
.pricing-class__icon-image--yskfp { --pricing-icon-url: url('/quiz-icons/yskfp-bcb916145406d3bdb2c382189787b1bf.svg'); }
.pricing-class__icon-image--yskug { --pricing-icon-url: url('/quiz-icons/yskug-14c80d8bcf99a69b9243d23537168d6d.svg'); }
.pricing-class__icon-image--yskup { --pricing-icon-url: url('/quiz-icons/yskup-a5835ced374e235f7cd4d57344a650d0.svg'); }
.pricing-class__icon-image--civics { --pricing-icon-url: url('/quiz-icons/civics-d81a4fbe06c7f234ad665c70c0cae7ce.svg'); }

/* ==========================================================================
   Card Color Variants
   ========================================================================== */

.pricing-class--v0 { --class-color: var(--wa-color-brand-60); }
.pricing-class--v1 { --class-color: var(--wa-color-success-60); }
.pricing-class--v2 { --class-color: var(--wa-color-warning-60); }
.pricing-class--v3 { --class-color: var(--wa-color-danger-60); }