अनुपात कायम राख्ने बाकस

.dc-ratio {
  --dc-ratio: 16 / 9;
  display: grid; place-items: center;
  aspect-ratio: var(--dc-ratio);
  width: 100%; max-width: 420px;
  border: 1px dashed var(--dc-line-bold);
  border-radius: var(--dc-r-md);
  background: repeating-linear-gradient(45deg,
    var(--dc-sunken), var(--dc-sunken) 8px,
    color-mix(in srgb, var(--dc-line) 70%, var(--dc-sunken)) 8px,
    color-mix(in srgb, var(--dc-line) 70%, var(--dc-sunken)) 16px);
  color: var(--dc-text-sub);
  font-family: var(--dc-font); font-size: 13px;
}
.dc-ratio__label {
  padding: 2px var(--dc-2);
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  font-variant-numeric: tabular-nums;
}
.dc-ratio--square { --dc-ratio: 1 / 1; max-width: 240px; }
.dc-ratio--portrait { --dc-ratio: 9 / 16; max-width: 200px; max-height: 70vh; }
.dc-ratio-set { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--dc-3); }
.dc-ratio-set .dc-ratio { width: 160px; max-width: none; }