/* Offcanvas responsive width - Apply directly to .offcanvas class */

/* Default (xs - mobile): Full width */
.offcanvas {
  width: 100% !important;
}

/* Small devices (landscape phones, >= 576px) */
@media (min-width: 576px) {
  .offcanvas {
    width: 75vw !important;
  }
}

/* Medium devices (tablets, >= 768px) */
@media (min-width: 768px) {
  .offcanvas {
    width: 75vw !important;
  }
}

/* Large devices (desktops, >= 992px) */
@media (min-width: 992px) {
  .offcanvas {
    width: 50vw !important;
  }
}

/* X-Large devices (large desktops, >= 1200px) */
@media (min-width: 1200px) {
  .offcanvas {
    width: 50vw !important;
  }
}

/* XX-Large devices (larger desktops, >= 1400px) */
@media (min-width: 1400px) {
  .offcanvas {
    width: 33.333333vw !important;
  }
}