.sm-case-card{
border-radius:20px;
background:var(--sm-surface);
border:1px solid var(--sm-surface-subtle);
padding:24px; display:flex; flex-direction:column; height:100%;
}
@media (max-width:544px){
.sm-case-card{ padding:16px; }
} .sm-case-card__media{ margin-bottom:24px; }
.sm-case-card__img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:20px; } .sm-case-card__noimg{
width:100%;
aspect-ratio:377/188; border-radius:20px;
background:var(--sm-surface-subtle);
} .sm-case-card__single{
width:100%;
aspect-ratio:377/188;
position:relative;
}
.sm-case-card__single .sm-case-card__img{ width:100%; height:100%; } .sm-case-card__compare{
display:grid;
grid-template-columns:1fr 1fr;
gap:2px; width:100%;
background:var(--sm-surface-subtle); border-radius:20px; } .sm-case-card__imgwrap{
position:relative;
aspect-ratio:1/1;
overflow:hidden;
background:var(--sm-surface);
} .sm-case-card__compare .sm-case-card__img{
width:100%; height:100%;
border-radius:0;
object-fit:cover;
} .sm-case-card__compare .sm-case-card__imgwrap:first-child{ border-radius:20px 0 0 20px; }
.sm-case-card__compare .sm-case-card__imgwrap:last-child { border-radius:0 20px 20px 0; } .sm-case-card__sticker{
position:absolute; left:50%; transform:translateX(-50%);
bottom:10px;
width:100px; height:20px; line-height:20px; text-align:center;
background:var(--sm-surface); color:var(--sm-muted);
border-radius:999px; font-size:14px; font-weight:500;
}
@media (max-width:544px){
.sm-case-card__sticker{ bottom:8px; }
} .sm-case-card__title{
margin:0 0 24px;
color:var(--sm-headline);
}
.sm-case-card__title a,
.sm-case-card__title a:link,
.sm-case-card__title a:visited{
color:var(--sm-headline);
text-decoration:none;
}
.sm-case-card__title a:hover,
.sm-case-card__title a:focus{
color:var(--sm-headline);
text-decoration:none;
} .sm-case-card__btn{
display:inline-block; width:100%; text-align:center;
padding:8px 16px; border:1px solid var(--sm-brand); color:var(--sm-brand);
background:var(--sm-surface); border-radius:999px;
font-size:16px; font-weight:500; line-height:1.3;
transition:background-color .2s ease, color .2s ease, border-color .2s ease;
text-decoration:none; margin-top:auto;
}
.sm-case-card__btn:hover,
.sm-case-card__btn:focus{
background:var(--sm-brand); border-color:var(--sm-brand); color:var(--sm-on-brand); outline:none; text-decoration:none;
} .sm-cases-grid{
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px;
}
@media (max-width:921px){
.sm-cases-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:544px){
.sm-cases-grid{ grid-template-columns:1fr; }
} .sm-carousel { position: relative; overflow: hidden; }
.sm-carousel__viewport { overflow: hidden; width: 100%; }
.sm-carousel__track { display: flex; gap: 24px; will-change: transform; } .sm-carousel__slide { flex: 0 0 auto; width: calc((100% - 2*24px) / 3); }
@media (max-width:921px){ .sm-carousel__slide{ width: calc((100% - 24px) / 2); } }
@media (max-width:544px){ .sm-carousel__slide{ width: 100%; } } .sm-carousel__nav{ position: absolute; top: 0; right: 0; display: flex; gap: 8px; z-index: 2; }
.sm-carousel__prev, .sm-carousel__next{ position: static; }