How to make vertical tab slider responsive for mobile

I built a vertical tab slider using a code block, but can't seem to get the formatting right for mobile. I'm still a newbie when it comes to CSS/HTML so I'm feeling a bit stuck.

Is there a way to...

• Make the tabs horizontal in mobile view?
• Format the height/width of the block for better responsiveness?
• Or, another way to display them for better visibility?

Code: https://codepen.io/skkhan/pen/MWWdXbb

Goal: https://www.squarestylist.com/shop/vertical-tabs

Try adding to Design > Custom CSS

/* Vertical Timeline CSS Mobile */
@media screen and (max-width:767px) {
	li.box, ul.main-box .box.active {
    width: 100% !important;
    overflow: visible !important;
}

.box span {
    writing-mode: initial !important;
    width: 100% !important;
    transform: unset !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.box.active .detail {position: relative !important;}
	ul.main-box {
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
}
}

Thanks, tuanphan! I appreciate you taking a look at this.

It stacked the tabs horizontally (which is great), but the layout was off and the tabs weren't expanding/retracting properly. The CSS you provided was really helpful, though! Because of it, I was able to come up with a workaround.

Here's what I used:

//Tab Slider Mobile
@media (max-width: 620px) {
  .main-box {
    flex-direction: column;
    width: 100% !important;
    .box {
      width: auto !important;
      height: auto !important;
      span {
        writing-mode: unset !important;
        transform: unset !important;
        position: relative !important;
        width: auto !important;
        left: unset !important;
        height: auto !important;
      }
      .detail {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        display: none !important;
        margin-top: 14px;
      }
      &.active {
        width: auto !important;
        .detail {
          display: block !important;
        }
      }
    }
  }
}