.posi{top:50%;right:-30%}.wimg{width:40%}.hdd{line-height:90%}.imv{display:none}@media (min-width:576px){.posi{top:5%;right:-150px}.wimg{width:30%}}@media (min-width:768px){.posi{top:5%;right:-35%}.wimg{width:40%}.imv{display:block}}@media (min-width:992px){.posi{top:5%;right:-20%}.wimg{width:40%}}@media (min-width:1200px){.posi{top:10%;right:-150px}.wimg{width:60%}}

/* —— Offcanvas panel + backdrop (Bootstrap 4 compatible) —— */
.offcanvas-panel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1050;
  /* Slide-in */
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
  /* Widths per breakpoint */
  width: 100vw;                 /* xs: full screen */
}
@media (min-width: 576px){ .offcanvas-panel{ width: 85vw; } }  /* sm */
@media (min-width: 768px){ .offcanvas-panel{ width: 60vw; } }  /* md */
@media (min-width: 992px){ .offcanvas-panel{ width: 40vw; } }  /* lg */
@media (min-width: 1200px){ .offcanvas-panel{ width: 30vw; } } /* xl */

/* Visible state */
.offcanvas-panel.show{
  transform: translateX(0);
}

/* Backdrop */
.offcanvas-backdrop{
  position: fixed;
  inset: 0;               /* shorthand: top/right/bottom/left: 0 */
  background: rgba(0,0,0,.35);
  z-index: 1040;
}