CodePen Embed - CSS Custom Properties Demo 7

<div class="landscape"></div>
<div class="landscape" style="--x: 100px; --y: 300px;"></div>
<div class="landscape" style="--x: 100px; --y: 500px;"></div>

.landscape {
  --default-x: var(--x, 200px);
  --default-y: var(--y, 100px);
  
  width: max(var(--default-x), var(--default-y));
  height: min(var(--default-x), var(--default-y));
  
  background: red;
  margin-bottom: 1em;
}

Run Pen

This Pen is owned by Georgi Popov on CodePen.

See more by @magadanskiuchen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.