```css id="cssfile"
/* 🌱 MOBILE FIRST BASE */
.tab-container{
  padding:12px;
  font-family:'Poppins',sans-serif;
}

.tab-title{
  color:#d32f2f;
  font-size:18px;
  text-align:center;
}

/* Layout */
.tab-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Image */
.tab-image-wrapper{
  position:relative;
  width:100%;
  max-width:400px;
  margin:auto;
}

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

/* Overlay */
.tab-overlay{
  position:absolute;
  inset:0;
}

/* Tabs */
.tab-item{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  transform:translate(-50%, -50%);
  cursor:pointer;
}

/* Mobile sizes */
.tab-circle{
  width:26px;
  height:26px;
  border-radius:50%;
}

.tab-label{
  font-size:10px;
  font-weight:600;
}

/* 📍 Positions */
.tab-item:nth-child(1){ top:21%; left:64%; }
.tab-item:nth-child(2){ top:36%; left:63%; }
.tab-item:nth-child(3){ top:51%; left:69%; }
.tab-item:nth-child(4){ top:66%; left:66%; }
.tab-item:nth-child(5){ top:81%; left:65%; }

/* Colors */
.tab-item:nth-child(1) .tab-label{ color:#2f80ed; }
.tab-item:nth-child(2) .tab-label{ color:#27ae60; }
.tab-item:nth-child(3) .tab-label{ color:#f39c12; }
.tab-item:nth-child(4) .tab-label{ color:#e84393; }
.tab-item:nth-child(5) .tab-label{ color:#8e44ad; }

/* Content */
.tab-content{
  font-size:14px;
}

.tab-box{
  display:none;
}

.tab-box.active{
  display:block;
}

/* 📱 TABLET */
@media(min-width:768px){

  .tab-container{
    padding:20px;
  }

  .tab-title{
    font-size:24px;
    text-align:left;
  }

  .tab-layout{
    flex-direction:row;
    gap:30px;
  }

  .tab-image-wrapper{
    width:50%;
    max-width:420px;
  }

  .tab-circle{
    width:36px;
    height:36px;
  }

  .tab-label{
    font-size:13px;
  }

  .tab-content{
    flex:1;
    font-size:15px;
  }
}

/* 🖥 DESKTOP */
@media(min-width:1024px){

  .tab-container{
    max-width:1100px;
    margin:40px auto;
  }

  .tab-circle{
    width:42px;
    height:42px;
  }

  .tab-label{
    font-size:14px;
  }

  .tab-content{
    font-size:16px;
  }
}
.tab-content{
  display:flex;
  align-items:center;   /* vertical center */
  justify-content:center; /* horizontal center */
}

.tab-box{
  display:none;
  text-align:center;
  max-width:700px;
}

.tab-box.active{
  display:block;
}
```