.demo-card{background-color:color-mix(in srgb, var(--brand-electric-blue) 6%, var(--primary-container) 94%);border:1px solid color-mix(in srgb, var(--brand-electric-blue) 20%, transparent 80%);border-top:2px solid var(--brand-electric-blue);border-radius:var(--radius-lg);flex-direction:column;height:100%;transition:border-color .2s,transform .2s;display:flex;position:relative;overflow:hidden}.demo-card:hover{border-color:color-mix(in srgb, var(--brand-electric-blue) 50%, transparent 50%);border-top-color:var(--brand-electric-blue);transform:translateY(-2px)}.demo-card__preview{aspect-ratio:16/10;background-color:var(--primary-container);width:100%;position:relative;overflow:hidden}.demo-card__image{object-fit:cover;object-position:top}.demo-card__body{padding:var(--space-5);gap:var(--space-2);flex-direction:column;flex:1;display:flex}.demo-card__header{justify-content:space-between;align-items:center;display:flex}.demo-card__title{font-family:var(--font-display);font-size:var(--headline-sm-size);font-weight:var(--headline-sm-weight);line-height:var(--headline-sm-line-height);color:var(--inverse-on-surface);margin:0}.demo-card__desc{font-size:var(--body-md-size);line-height:var(--body-md-line-height);color:var(--on-primary-container);flex:1;margin:0}.demo-card__link{margin-top:var(--space-2);align-self:flex-start}@media (max-width:768px){.demo-card__body{padding:var(--space-3)}}