/* ===== MOBILE RESPONSIVE FINAL ===== */

@media (max-width: 768px) {

  body{
    overflow-x:hidden;
  }

  .page-wrap{
    padding:10px;
    justify-content:center;
  }

  .main-column{
    width:100% !important;
    max-width:100% !important;
  }

  .table-container,
  .info-table{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow-x:auto;
  }

  .custom-table{
    width:100%;
    table-layout:auto;
  }

  .custom-table td{
    height:auto !important;
    padding:8px;
  }

  #step1,#step2,#step3{
    height:auto !important;
    min-height:auto;
  }

  .big-box{
    padding:15px;
  }

  .upload-title{
    font-size:20px;
  }

  .upload-subtitle{
    font-size:14px;
  }

  .upload-btn,
  button{
    width:100%;
    max-width:260px;
  }

  input, select{
    width:100%;
    max-width:260px;
  }

  .crop-container{
    width:100%;
    max-width:280px;
    height:300px;
  }

  .preview-box{
    width:100%;
    max-width:260px;
    height:auto;
    aspect-ratio:3/4;
  }

  #previewCanvas{
    width:100%;
    height:100%;
  }

  .control-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }

  .image-box img{
    width:100%;
    height:auto;
  }

  .desc-box{
    padding:15px;
  }

}

/* SMALL DEVICES */

@media (max-width: 480px) {

  .upload-title{
    font-size:18px;
  }

  .upload-subtitle{
    font-size:13px;
  }

  .crop-container{
    height:260px;
  }

  .preview-box{
    max-width:220px;
  }

}/* ===== MOBILE RESPONSIVE FINAL ===== */

@media (max-width: 768px) {

  body{
    overflow-x:hidden;
  }

  .page-wrap{
    padding:10px;
    justify-content:center;
  }

  .main-column{
    width:100% !important;
    max-width:100% !important;
  }

  .table-container,
  .info-table{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow-x:auto;
  }

  .custom-table{
    width:100%;
    table-layout:auto;
  }

  .custom-table td{
    height:auto !important;
    padding:8px;
  }

  #step1,#step2,#step3{
    height:auto !important;
    min-height:auto;
  }

  .big-box{
    padding:15px;
  }

  .upload-title{
    font-size:20px;
  }

  .upload-subtitle{
    font-size:14px;
  }

  .upload-btn,
  button{
    width:100%;
    max-width:260px;
  }

  input, select{
    width:100%;
    max-width:260px;
  }

  .crop-container{
    width:100%;
    max-width:280px;
    height:300px;
  }

  .preview-box{
    width:100%;
    max-width:260px;
    height:auto;
    aspect-ratio:3/4;
  }

  #previewCanvas{
    width:100%;
    height:100%;
  }

  .control-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }

  .image-box img{
    width:100%;
    height:auto;
  }

  .desc-box{
    padding:15px;
  }

}

/* SMALL DEVICES */

@media (max-width: 480px) {

  .upload-title{
    font-size:18px;
  }

  .upload-subtitle{
    font-size:13px;
  }

  .crop-container{
    height:260px;
  }

  .preview-box{
    max-width:220px;
  }

}