@layer components{.fuel-prices{& .fuel-prices__title{font-size:var(--size-step-2);margin:0 0 var(--space-s)}& .fuel-prices__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-s);margin:0;padding:0;list-style:none}& .fuel-prices__item{display:grid;grid-template-columns:1fr auto;gap:var(--space-3xs)var(--space-2xs);align-items:baseline;padding:var(--space-s);background:var(--color-surface-mixed);border:1px solid var(--color-border);border-radius:var(--radius-m)}& .fuel-prices__price{font-size:var(--size-step-1);font-variant-numeric:tabular-nums}& .fuel-prices__change{grid-column:1/-1;font-size:var(--size-step--1);color:var(--color-text-muted);&[data-direction=up]{color:var(--color-price-up)}&[data-direction=down]{color:var(--color-price-down)}}& .fuel-prices__sparkline{grid-column:1/-1;position:relative;height:3rem}& .fuel-prices__week{grid-column:1/-1;color:var(--color-text-muted)}}@media(prefers-color-scheme:dark){.fuel-prices .fuel-prices__item{background:var(--color-surface-mixed);border-color:var(--color-border)}}}