<div class="landscape landscape-1"></div>
<div class="landscape landscape-2"></div>
<div class="landscape landscape-3"></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;
}

.landscape-2 {
  --x: 100px;
  --y: 300px;
}

.landscape-3 {
  --x: 500px;
  --y: 100px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.