.progressive-media-container {
  position: relative;
  overflow: hidden;
}

.progressive-media-container.aspect-square {
  aspect-ratio: 1 / 1;
}

.progressive-media-container.aspect-video {
  aspect-ratio: 16 / 9;
}
.progressive-media-container.hero-fix {
  max-height: var(--max-video-h);
  padding-inline: 0;
}

.progressive-media-container.article-fix {
  padding-inline: calc(var(--bs-gutter-x) / 2 + var(--container-margins));
  padding-block-end: calc(var(--section-margins) / 2);
}

.container-xl {
  position: relative;
  z-index: 1;
}

.progressive-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  filter: blur(5px);
}

.progressive-placeholder.blur-sm {
  filter: blur(4px);
}

.progressive-placeholder.bg-gray-200 {
  background-color: #e5e7eb;
}

.progressive-picture {
  transition: opacity 0.3s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.progressive-picture.loaded {
  opacity: 1 !important;
}

.progressive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--gray, #c4c4c4);
  border-radius: var(--bs-border-radius, 0.25rem);
  transition: box-shadow 0.3s;
}

.progressive-image.rounded-lg {
  border-radius: 0.5rem;
}

.progressive-image.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}