main{width:100vw;height:100svh;display:flex;overflow:hidden}
.project-icon .glow{inset:calc(var(--III-size-4) * -1);border-radius:var(--III-rad-3);border:var(--III-size-1) solid transparent;pointer-events:none;filter:blur(var(--III-size-6));position:absolute;overflow:visible;-webkit-mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.project-icon .glow:after{content:"";height:var(--III-size-17);border-radius:var(--III-rad-2);background:linear-gradient(to right, transparent, var(--III-color-9));offset-path:rect(0 100% 100% 0 round var(--III-rad-2));width:80%;transition:all var(--III-motion-3);opacity:0;offset-distance:75%;display:inline-block;position:absolute}.project-icon:hover .glow:after,.project-header:hover .project-icon .glow:after,.bento-card:hover .project-icon .glow:after{offset-distance:90%;opacity:1}
.project-icon{--bg:var(--III-color-2);--bd:var(--III-color-4);--bd-hover:var(--III-color-5);--glow:var(--III-color-10);color:var(--III-color-6);width:var(--III-size-18);height:var(--III-size-18);background:var(--bg);border:var(--III-size-1) solid var(--bd);border-radius:var(--III-rad-2);font-weight:600;font-size:var(--III-size-9);transition:border-color var(--III-motion-2), box-shadow var(--III-motion-2);flex-shrink:0;align-self:center;place-items:center;margin:0;display:grid;position:relative}.project-icon:hover,.project-header:hover .project-icon,.bento-card:hover .project-icon{border-color:var(--bd-hover);box-shadow:0 0 var(--III-size-14) calc(var(--III-size-3) * -1) var(--glow)}
.project-domain{font-size:var(--III-size-8);color:var(--III-color-8);text-decoration:none}
.bento{width:100%;height:100svh;padding:var(--III-size-18);gap:var(--III-size-12);grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);grid-template-areas:"astrit slant css css""astrit trekend trekend lona""astrit trekend trekend lona""slash slash glyf lona";place-items:stretch stretch;display:grid}.bento-card{--bg:var(--III-color-11);--bd:var(--III-color-12);--bd-hover:var(--III-color-5);--glow:var(--III-color-10);border-radius:var(--radii-card);border:var(--III-size-1) solid var(--bd);background:var(--bg);justify-content:center;align-items:center;gap:var(--III-size-9);padding:var(--III-size-18);text-align:left;transition:opacity var(--III-motion-2), border-color var(--III-motion-2), box-shadow var(--III-motion-2), transform var(--III-motion-2);flex-direction:row;display:flex;position:relative;overflow:hidden}.card-astrit{grid-area:astrit;align-items:flex-end}.bento-card-bg{z-index:0;object-fit:cover;opacity:.4;filter:grayscale()saturate(0);mix-blend-mode:screen;transition:opacity var(--III-motion-3), filter var(--III-motion-3), transform var(--III-motion-3);transform:scale(1);-webkit-mask-image:linear-gradient(#000 45%,#0000 100%);mask-image:linear-gradient(#000 45%,#0000 100%)}.bento-card-dots{z-index:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;background-image:radial-gradient(#0009 1px,#0000 1px);background-size:2px 2px;position:absolute;inset:0}.card-astrit:hover .bento-card-bg,.card-lona:hover .bento-card-bg{opacity:1;transform:scale(1.08)}.card-trekend{grid-area:trekend;justify-content:center}.card-lona{grid-area:lona;align-items:flex-end}.card-slant{grid-area:slant}.card-slash{grid-area:slash;justify-content:flex-start}.card-css{grid-area:css;justify-content:flex-start}.card-glyf{grid-area:glyf}.bento-card .project-icon{width:var(--III-size-18);height:var(--III-size-18)}.bento-content{align-items:center;gap:var(--III-size-12);z-index:1;display:flex;position:relative}.bento-card-text{align-items:flex-start;gap:var(--III-size-4);flex-direction:column;display:flex}.bento-card-text h2{font-size:var(--III-size-10);color:var(--III-color-6);letter-spacing:-.01em;margin:0;font-weight:500}.bento-card .project-domain{font-size:var(--III-size-8);transition:color var(--III-motion-1)}.bento-card:hover .project-domain{color:var(--III-color-7)}@media (max-width:720px){.bento{grid-template-columns:repeat(2,1fr);grid-template-rows:unset;grid-template-areas:"trekend trekend""astrit lona""slant slash""css css""glyf glyf";height:auto;min-height:100svh}.card-trekend{aspect-ratio:1}.card-astrit,.card-lona{aspect-ratio:9/16}}