If you would like to set each off-canvas area separately you can use the below code as a model for modify a single off-canvas area

independant-off-canvas-size

/* Set foundation 6 off canvas size independant of global settings*/

$offcanvas-right-size: 300px;

.is-open-right {
    -webkit-transform: translateX(-$offcanvas-right-size);
    -ms-transform: translateX(-$offcanvas-right-size);
    transform: translateX(-$offcanvas-right-size);
}

.off-canvas.position-right {
  width: $offcanvas-right-size;
  right: -$offcanvas-right-size;
}