/* Opt-in mixed-media carousel. Keep all rules inside this component. */
.dandan-mixed-carousel {
  --dandan-media-ratio: 16 / 9;
  max-width: 1200px;
  margin: 2rem auto 3rem;
  min-width: 0;
}
.dandan-mixed-carousel .dandan-works-heading {
  margin: 0 0 1.25rem;
  color: #142c36;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
}
.dandan-mixed-carousel .ghostkit-carousel-items {
  align-items: stretch;
}
.dandan-mixed-carousel .ghostkit-carousel-slide {
  display: flex;
  align-self: stretch;
  height: auto !important;
  min-width: 0;
}
.dandan-mixed-carousel .ghostkit-carousel-slide > :is(.wp-block-video, .wp-block-image, .wp-block-embed) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}
.dandan-mixed-carousel :is(.wp-block-video > video, .wp-block-image > img, .wp-block-image > a, .wp-block-embed__wrapper) {
  display: block;
  flex: 0 0 auto;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 200px;
  aspect-ratio: var(--dandan-media-ratio) !important;
  object-fit: contain;
  background: transparent;
}
.dandan-mixed-carousel .wp-block-image > a {
  position: relative;
}
.dandan-mixed-carousel .wp-block-image > a > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.dandan-mixed-carousel .wp-block-embed__wrapper {
  position: relative;
  padding: 0 !important;
}
/* Replace WordPress's ratio spacer, so it cannot add a second frame height. */
.dandan-mixed-carousel .wp-block-embed__wrapper::before {
  display: none !important;
  content: none !important;
  padding: 0 !important;
}
.dandan-mixed-carousel .wp-block-embed__wrapper > iframe {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  border: 0;
}
.dandan-mixed-carousel .ghostkit-carousel-slide > figure > figcaption {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(4.8em + 24px);
  margin: 0 !important;
  padding: 12px 10px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .dandan-mixed-carousel { margin: 1.5rem auto 2rem; }
}