.deferred-home-section {
  display: block;
  min-width: 0;
}

.deferred-home-section__skeleton {
  overflow: hidden;
  padding-top: var(--deferred-section-padding-top);
  padding-bottom: var(--deferred-section-padding-bottom);
}

.deferred-home-section__heading {
  min-height: 38px;
  margin-bottom: 20px;
}

.deferred-home-section__title {
  display: block;
}

.deferred-home-section__items {
  display: flex;
  gap: var(--grid-horizontal-space);
  overflow: hidden;
}

.deferred-home-section__item {
  flex: 0 0 calc((100% - (var(--grid-horizontal-space) * 3)) / 4);
  min-width: 0;
}

.deferred-home-section__media,
.deferred-home-section__line {
  display: block;
  overflow: hidden;
  background: rgb(var(--color-image-loading-background));
}

.deferred-home-section__media::after,
.deferred-home-section__line::after {
  display: block;
  width: 45%;
  height: 100%;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--color-page-background), 0.55),
    transparent
  );
  transform: translateX(-120%);
  animation: deferred-home-section-shimmer 1.4s ease-in-out infinite;
}

.deferred-home-section--products .deferred-home-section__media {
  aspect-ratio: 3 / 4;
}

.deferred-home-section--videos .deferred-home-section__media {
  aspect-ratio: 5 / 9;
  border-radius: 8px;
}

.deferred-home-section__line {
  height: 12px;
  margin-top: 12px;
}

.deferred-home-section__line--heading {
  width: min(210px, 55%);
  height: 24px;
  margin-top: 0;
}

.deferred-home-section__line--wide {
  width: 82%;
}

.deferred-home-section__line--short {
  width: 42%;
  margin-top: 8px;
}

.deferred-home-section__error {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  padding: 24px var(--page-padding);
}

.deferred-home-section__error[hidden] {
  display: none;
}

.deferred-home-section__retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.deferred-home-section__retry-icon {
  font-size: 18px;
  line-height: 1;
}

@keyframes deferred-home-section-shimmer {
  to {
    transform: translateX(280%);
  }
}

@media (max-width: 959px) {
  .deferred-home-section__skeleton {
    padding-top: calc(var(--deferred-section-padding-top) / 2);
    padding-bottom: calc(var(--deferred-section-padding-bottom) / 2);
  }

  .deferred-home-section__heading {
    min-height: 32px;
    margin-bottom: 14px;
  }

  .deferred-home-section__items {
    gap: var(--grid-mobile-horizontal-space);
    overflow: visible;
  }

  .deferred-home-section--products .deferred-home-section__item {
    flex-basis: calc((100% - var(--grid-mobile-horizontal-space)) / 2);
  }

  .deferred-home-section--videos .deferred-home-section__item {
    flex-basis: 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deferred-home-section__media::after,
  .deferred-home-section__line::after {
    animation: none;
  }
}