.sfg-template-skeleton {
display: grid;
grid-template-columns: repeat(var(--sfg-skeleton-columns, 4), minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.sfg-skeleton-card {
min-width: 0;
}
.sfg-skeleton-image,
.sfg-skeleton-button,
.sfg-skeleton-title,
.sfg-skeleton-price {
background: linear-gradient(90deg, #eeeeee 25%, #f8f8f8 50%, #eeeeee 75%);
background-size: 200% 100%;
animation: sfgSkeleton 1.2s infinite;
}
.sfg-skeleton-image {
aspect-ratio: 0.9;
width: 100%;
}
.sfg-skeleton-button {
height: 52px;
margin-top: 12px;
border-radius: 2px;
}
.sfg-skeleton-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding-top: 14px;
}
.sfg-skeleton-title {
width: 62%;
height: 16px;
border-radius: 2px;
}
.sfg-skeleton-price {
width: 26%;
height: 16px;
border-radius: 2px;
}
@keyframes sfgSkeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (max-width: 767px) {
.sfg-template-skeleton {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.sfg-skeleton-button {
height: 44px;
margin-top: 10px;
}
.sfg-skeleton-meta {
display: block;
padding-top: 10px;
}
.sfg-skeleton-title {
width: 82%;
}
.sfg-skeleton-price {
width: 48%;
margin-top: 8px;
}
}