Fitting a changing viewport

dynamic, large & small viewport units to the rescue

.hero    { block-size: 100dvh; }
.cover   { block-size: 100lvh; }
.compact { block-size: 100svh; }