/* Shared discovery cards for Motion, Carousel and Banners. Artwork keeps its native aspect ratio. */
html body.site-design :is(.effects,.banner-design-grid,.carousel-design-grid){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
html body.site-design .studio-design-card{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0;margin:0;padding:8px;border:0;outline:none;border-radius:16px;background:var(--ui-raised,#f5f6f7);color:var(--ui-text,#090909);text-align:left;cursor:pointer;box-shadow:none}
html body.site-design .studio-design-card>.studio-card-title{display:block;flex:none;align-self:stretch;min-width:0;margin:3px 3px 0;padding:0;font:inherit;font-size:14px;line-height:20px;letter-spacing:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ui-text,#090909)}
html body.site-design .studio-design-card>:is(canvas,.effect-media){display:block;width:100%;margin:0;border:0;border-radius:9px;overflow:hidden}
html body.site-design .studio-design-card.effect-card[aria-pressed=true] .effect-media{outline:none}
html body.site-design .studio-design-card[aria-pressed=true]{outline:none}
html body.site-design .studio-design-card:not(:disabled):hover{background:var(--ui-raised,#f5f6f7);color:var(--ui-text,#090909)}
html body.site-design .studio-design-card:focus-visible{outline:3px solid var(--ui-text,#090909);outline-offset:-3px}
html body.site-design .studio-design-card>canvas{background:transparent}
html body.site-design .studio-design-card:disabled{cursor:wait;opacity:.5}
@media(max-width:1100px){
 html body.site-design :is(.effects,.banner-design-grid,.carousel-design-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
}
@media(max-width:760px){
 html body.site-design .studio-design-card>.studio-card-title{font-size:12px;line-height:18px}
}