.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;
}

[data-pricing-class-icon="bus"] { --pricing-icon-url: url('/quiz-icons/bus-9dda9b4d9c76378a63018ef99f2371f9.svg'); }
[data-pricing-class-icon="car"] { --pricing-icon-url: url('/quiz-icons/car-a120a33b837ac723a83cfa4ea3c51deb.svg'); }
[data-pricing-class-icon="drone"] { --pricing-icon-url: url('/quiz-icons/drone-da19f4173273fe77ac1610d2327b0598.svg'); }
[data-pricing-class-icon="hunter"] { --pricing-icon-url: url('/quiz-icons/hunter-2c43eebbee2a69bec1ffdd470bdcb6a7.svg'); }
[data-pricing-class-icon="lgv"] { --pricing-icon-url: url('/quiz-icons/lgv-14c80d8bcf99a69b9243d23537168d6d.svg'); }
[data-pricing-class-icon="moped"] { --pricing-icon-url: url('/quiz-icons/moped-f350004cc424e8016b43cf7d5b03f429.svg'); }
[data-pricing-class-icon="motorcycle"] { --pricing-icon-url: url('/quiz-icons/motorcycle-b21d91b81a040991a4f1f52d981a279f.svg'); }
[data-pricing-class-icon="pcv"] { --pricing-icon-url: url('/quiz-icons/pcv-bcb916145406d3bdb2c382189787b1bf.svg'); }
[data-pricing-class-icon="snowmobile"] { --pricing-icon-url: url('/quiz-icons/snowmobile-7ac4f77854cdb150ebfbcf11af3b724e.svg'); }
[data-pricing-class-icon="taxi"] { --pricing-icon-url: url('/quiz-icons/taxi-bc1a836d933b2fb6740c64c7a5e269a6.svg'); }
[data-pricing-class-icon="tractor"] { --pricing-icon-url: url('/quiz-icons/tractor-9ae28cae6dc08714518b20a8d66c220d.svg'); }
[data-pricing-class-icon="truck"] { --pricing-icon-url: url('/quiz-icons/truck-a8bffc29447eb3b28e2c20a46069d007.svg'); }
[data-pricing-class-icon="yskfg"] { --pricing-icon-url: url('/quiz-icons/yskfg-4483a04d9b16436fbb96ea02ccdd1304.svg'); }
[data-pricing-class-icon="yskfp"] { --pricing-icon-url: url('/quiz-icons/yskfp-bcb916145406d3bdb2c382189787b1bf.svg'); }
[data-pricing-class-icon="yskug"] { --pricing-icon-url: url('/quiz-icons/yskug-14c80d8bcf99a69b9243d23537168d6d.svg'); }
[data-pricing-class-icon="yskup"] { --pricing-icon-url: url('/quiz-icons/yskup-a5835ced374e235f7cd4d57344a650d0.svg'); }
[data-pricing-class-icon="civics"] { --pricing-icon-url: url('/quiz-icons/civics-d81a4fbe06c7f234ad665c70c0cae7ce.svg'); }

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

[data-pricing-class-variant="0"] { --class-color: var(--wa-color-brand-60); }
[data-pricing-class-variant="1"] { --class-color: var(--wa-color-success-60); }
[data-pricing-class-variant="2"] { --class-color: var(--wa-color-warning-60); }
[data-pricing-class-variant="3"] { --class-color: var(--wa-color-danger-60); }