.spas-pod-display {
display: block;
width: 100%;
margin: var( --spas-pod-block-margin, 24px ) 0;
}
.spas-pod-display.spas-pod-layout-grid {
display: grid;
grid-template-columns: repeat( var( --spas-pod-columns, 1 ), 1fr );
gap: var( --spas-pod-gap, 16px );
}
.spas-pod-display.spas-pod-columns-1 { --spas-pod-columns: 1; }
.spas-pod-display.spas-pod-columns-2 { --spas-pod-columns: 2; }
.spas-pod-display.spas-pod-columns-3 { --spas-pod-columns: 3; }
.spas-pod-display.spas-pod-columns-4 { --spas-pod-columns: 4; }
@media ( max-width: 900px ) {
.spas-pod-display.spas-pod-layout-grid.spas-pod-columns-3,
.spas-pod-display.spas-pod-layout-grid.spas-pod-columns-4 {
--spas-pod-columns: 2;
}
}
@media ( max-width: 560px ) {
.spas-pod-display.spas-pod-layout-grid {
--spas-pod-columns: 1;
}
}
.spas-pod-display.spas-pod-layout-single {
display: block;
}
.spas-pod-card {
display: flex;
}
.spas-pod-card-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
width: 100%;
padding: var( --spas-pod-card-padding, 12px );
box-sizing: border-box;
} .spas-pod-card-media {
display: block;
width: 100%;
border-radius: 4px;
background: #f2f2f2;
}
img.spas-pod-card-media {
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
video.spas-pod-card-media {
height: auto;
}
.spas-pod-card-title {
margin-top: 8px;
font-weight: 600;
line-height: 1.3;
}
.spas-pod-card-description {
margin-top: 4px;
font-size: 0.9em;
opacity: 0.85;
}
.spas-pod-card-price {
margin-top: 6px;
font-weight: 600;
} .spas-pod-style-card .spas-pod-card-link {
background: #fff;
border: 1px solid rgba( 0, 0, 0, 0.1 );
border-radius: 8px;
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.spas-pod-style-card .spas-pod-card-link:hover {
box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
transform: translateY( -2px );
} :where( .spas-pod-card-button ) {
display: inline-block;
margin-top: 8px;
padding: 8px 14px;
border-radius: 4px;
background: var( --spas-pod-button-bg, #1a1a1a );
color: var( --spas-pod-button-color, #ffffff );
font-weight: 600;
text-align: center;
text-decoration: none;
} .spas-pod-card-button--custom-color {
transition: filter 0.15s ease;
}
.spas-pod-card-button--custom-color:hover,
.spas-pod-card-button--custom-color:focus-visible {
filter: brightness( 0.88 );
}