/* Case layouts are scoped to the homepage showcase and project archive. */
.x-cases-mosaic{grid-template-columns:minmax(0,1fr)}
.x-cases-mosaic .x-case{position:relative;min-width:0;overflow:hidden;border:0;background:var(--x-ink);aspect-ratio:4/3}
.x-cases-mosaic .x-case:hover{transform:none}
.x-cases-mosaic .x-case-media{position:absolute;inset:0;aspect-ratio:auto;background:var(--x-ink)}
.x-cases-mosaic .x-case-body{position:absolute;inset:auto 0 0;padding:42px 20px 18px;color:var(--x-white);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.x-cases-mosaic .x-case-body b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin-bottom:0;color:inherit}
.x-cases-mosaic .x-case-summary{display:none}
.x-cases-mosaic .x-case-body em{margin-top:5px;color:inherit}
.x-cases-mosaic .x-case:focus-visible,.x-cases-list .x-case:focus-visible{outline:3px solid var(--x-blue);outline-offset:4px}
@media(min-width:640px){
  .x-cases-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
  .x-cases-mosaic:has(>.x-case:nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,3fr) minmax(0,7fr);height:clamp(520px,52vw,660px)}
  .x-cases-mosaic:has(>.x-case:nth-child(4))>.x-case{aspect-ratio:auto;min-height:0}
  .x-cases-mosaic:has(>.x-case:nth-child(4))>.x-case:first-child{grid-column:1;grid-row:1/3}
  .x-cases-mosaic:has(>.x-case:nth-child(4))>.x-case:nth-child(2){grid-column:2;grid-row:1}
  .x-cases-mosaic:has(>.x-case:nth-child(4))>.x-case:nth-child(3){grid-column:3;grid-row:1}
  .x-cases-mosaic:has(>.x-case:nth-child(4))>.x-case:nth-child(4){grid-column:2/4;grid-row:2}
}

.x-cases-list{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
.x-cases-list .x-case{min-width:0;height:100%;overflow:hidden}
.x-cases-list .x-case-body{display:flex;flex-direction:column;height:190px}
.x-cases-list .x-case-body b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;white-space:normal;word-break:normal;overflow-wrap:anywhere;flex:none;height:67.2px}
.x-cases-list .x-case-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;flex:none;height:42.9px;font-size:13px;color:var(--x-muted);line-height:1.65}
.x-cases-list .x-case-body em{flex:none;margin-top:auto}
@media(min-width:640px){.x-cases-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.x-cases-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){
  .x-cases-mosaic .x-case,.x-cases-list .x-case,.x-cases-mosaic .x-case-media img,.x-cases-list .x-case-media img{transition:none}
}