/* ===============================
   Extra small devices (<576px)
================================ */
@media (max-width: 575.98px) {
  .mobile-frame {
    background: linear-gradient(13.29deg, #001D0A -4%, #00270F 80.57%);
    width: 100%;
    height: 100%;        
    overflow: hidden;  
  }
}

/* ===============================
   Small devices (≥576px)
================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
  .mobile-frame {
    width: 576px;
    background: linear-gradient(13.29deg, #001D0A -4%, #00270F 80.57%);
    height: 100%;
    overflow: hidden;
  }
}

/* ===============================
   Medium devices (≥768px)
================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-frame {
    width: 576px;
    background: linear-gradient(13.29deg, #001D0A -4%, #00270F 80.57%);
    height: 100%;
    overflow: hidden;
  }
}

/* ===============================
   Large devices (≥992px)
================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .mobile-frame {
    width: 576px;
    background: linear-gradient(13.29deg, #001D0A -4%, #00270F 80.57%);
    height: 100%;
    overflow: hidden;
  }
}

/* ===============================
   Extra large devices (≥1200px)
================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .mobile-frame {
    width: 576px;
    background: linear-gradient(13.29deg, #001D0A -4%, #00270F 80.57%);
    height: 100%;
    overflow: hidden;
  }
}

/* ===============================
   XXL devices (≥1400px)
================================ */
@media (min-width: 1400px) {
  .mobile-frame {
    width: 576px;
    background: linear-gradient(13.29deg, #001D0A -4%, #00270F 80.57%);
    height: 100%;
    overflow: hidden;
  }
}