.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;
  }
}