New viewport units

NewViewportUnits.css

.hero-image {
  height: 100dvh; /* Height will adapt to the address bar's appearance */
}

.sticky-footer {
  height: 100svh; /* Remains visible and consistent */
}

.fullscreen-gallery {
  height: 100lvh; /* Utilizes the entire screen, no UI */
}

.responsive-modal {
  height: 100dvh; /* Adjusts to dynamic viewport changes */
}

.modal {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Will override if supported */
}