@layer components{.bento{padding-block:clamp(var(--s-9),12vw,var(--s-10));padding-inline:clamp(var(--s-4),6vw,var(--s-10));background:var(--bg)}.bento__head{max-inline-size:42ch;margin-block-end:var(--s-7)}.bento__eyebrow{margin:0 0 var(--s-4);font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.14em;color:var(--text-faint)}.bento__heading{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--step-3);line-height:var(--leading-display);letter-spacing:-0.02em;text-transform:uppercase;text-wrap:balance;color:var(--text-muted)}.bento__heading em{font-style:normal;color:var(--accent)}.bento__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}.bento__cell{display:flex}.bento-tile{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-block-size:208px;padding:var(--s-5);border:1px solid var(--hairline);border-radius:var(--r-2);overflow:clip;color:var(--text);transition:border-color var(--dur-2) var(--ease-out)}.bento-tile:hover{border-color:color-mix(in srgb,var(--text) 22%,transparent)}.bento-tile--type{background:linear-gradient(155deg,var(--surface-2) 0%,var(--surface-1) 100%)}.bento-tile--photo{background:var(--surface-1)}.bento-tile__media{position:absolute;inset:0;z-index:-2;display:block}.bento-tile__media .pic{position:absolute;inset:0;height:100%;background:var(--lqip) center / cover}.bento-tile__media img{width:100%;height:100%;object-fit:cover}.bento-tile__scrim{position:absolute;inset:0;z-index:-1;display:block;background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 36%,color-mix(in srgb,var(--bg) 22%,transparent) 62%,transparent 100%)}.bento-tile__body{position:relative;z-index:1;display:flex;flex-direction:column}.bento-tile__tag{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.12em;color:var(--text-faint);margin-block-end:var(--s-2)}.bento-tile__name{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:0.98;letter-spacing:-0.01em;text-transform:uppercase;color:var(--text)}.bento-tile__desc{margin-block-start:var(--s-2);max-inline-size:40ch;font-family:var(--font-sans);font-size:var(--step--1);line-height:var(--leading-body);color:var(--text-muted);text-wrap:pretty}.bento-tile__cta{display:inline-flex;align-items:center;gap:var(--s-2);margin-block-start:var(--s-4);font-family:var(--font-sans);font-weight:var(--weight-body-medium);font-size:var(--step--1);letter-spacing:0.04em;text-transform:uppercase;color:var(--accent)}.bento-tile__arrow{transition:transform var(--dur-1) var(--ease-out)}.bento-tile:hover .bento-tile__arrow{transform:translateX(3px)}.bento-tile--ceramic .bento-tile__name{font-size:var(--step-3)}.bento-tile--ceramic .bento-tile__desc{font-size:var(--step-0);max-inline-size:30ch}@media (hover:hover) and (pointer:fine){.bento-tile__desc,.bento-tile__cta{opacity:0;transform:translateY(6px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}.bento-tile:hover .bento-tile__desc,.bento-tile:focus-within .bento-tile__desc,.bento-tile:hover .bento-tile__cta,.bento-tile:focus-within .bento-tile__cta{opacity:1;transform:none}.bento-tile__media img{transition:transform var(--dur-3) var(--ease-out)}.bento-tile--photo:hover .bento-tile__media img{transform:scale(1.04)}}@media (min-width:900px){.bento__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(212px,1fr);gap:var(--s-4)}.bento__cell--ceramic{grid-column:1 / 3;grid-row:1 / 3}.bento__cell--paint{grid-column:3;grid-row:1}.bento__cell--interior{grid-column:4;grid-row:1}.bento__cell--exterior{grid-column:3;grid-row:2}.bento__cell--full{grid-column:4;grid-row:2}}}