.dci-collage {
  --dci-width: 710px;
  --dci-radius: 20px;
  --dci-background: transparent;
  width: 100%;
  background: var(--dci-background);
  box-sizing: border-box;
}
.dci-collage .dci-collage__canvas {
  width: min(100%, var(--dci-width));
  margin: 0 auto;
  overflow: hidden;
}
.dci-collage .dci-collage__layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.816901% 5.915493% 2.535211% 6.901408%;
  box-sizing: border-box;
}
.dci-collage .dci-collage__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}
.dci-collage .dci-collage__row--top { justify-content: flex-end; margin-bottom: .969305%; }
.dci-collage .dci-collage__row--middle { width: 99.353796%; gap: 1.219512%; margin-bottom: 1.454%; }
.dci-collage .dci-collage__panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 0;
  border-radius: calc(var(--dci-radius) * var(--dci-scale, 1));
  isolation: isolate;
  background: #293047;
}
.dci-collage .dci-collage__panel--top { flex-basis: 66.235865%; aspect-ratio: 410 / 274; }
.dci-collage .dci-collage__row--middle .dci-collage__panel { flex: 1 1 0; aspect-ratio: 2 / 3; }
.dci-collage .dci-collage__panel--bottom { flex-basis: 66.074313%; aspect-ratio: 409 / 273; }
.dci-collage .dci-collage__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  opacity: 0;
  transition: none;
}
.dci-collage .dci-collage__image--set-first { z-index: 1; opacity: 1; }
.dci-collage [hidden] { display: none !important; }