<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.