/* resources/css/extras.css */

.h-svh-custom { /* Default height (can be overridden by media queries) */
  height: calc(100svh - 42px); /* Adjust 100px as needed */
}

@media (min-width: 640px) { /* xs breakpoint (adjust as needed) */
  .h-svh-custom-xs {
    height: calc(100svh - 50px); /* Example: subtract 50px on xs screens */
  }
}

@media (min-width: 768px) { /* sm breakpoint (adjust as needed) */
  .h-svh-custom-sm {
    height: calc(100svh - 75px); /* Example: subtract 75px on sm screens */
  }
}

@media (min-width: 1024px) { /* md breakpoint (adjust as needed) */
  .h-svh-custom-md {
    height: calc(100svh - 100px); /* Example: subtract 100px on md screens */
  }
}

@media (min-width: 1280px) { /* lg breakpoint (adjust as needed) */
  .h-svh-custom-lg {
    height: calc(100svh - 150px); /* Example: subtract 150px on lg screens */
  }
}

/* Add more breakpoints as needed (xl, 2xl, etc.) */