.classes{max-width:1480px;height:850px;padding:0 32px 50px;margin:0 auto;display:flex;flex-direction:column;gap:20px;& ul{list-style-type:none;& li{padding:0}}& h2{color:var(--color-blue)}& h3{opacity:.6}& .selector{max-width:1380px;height:60px;flex-shrink:0;display:flex;justify-content:space-around;position:relative;background:#00C2FF;background:linear-gradient(63deg,rgba(0,194,255,1),rgba(255,106,213,1));border-radius:50px;& li:not(.background){width:100%;font-size:1.44rem;font-weight:700;color:var(--color-white);display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;& span{margin-left:.3rem}&.active{color:var(--color-dark)}}& .background{width:120px;height:100%;box-sizing:border-box;background-color:var(--color-white);border:1px solid var(--primiary-purple);position:absolute;border-radius:50px}}& .content-box{display:flex;justify-content:space-between;& img{max-width:812px;max-height:415px;object-fit:cover}}& .years{display:flex;flex-direction:column;align-items:flex-start;gap:10px;& .year{background:none;border:none;padding:0 0 0 10px;color:var(--color-dark);display:flex;flex-direction:column;text-align:start;position:relative;transition:all .3s;h4{opacity:.6}&.active{h4{opacity:1}}& li{font-size:1.2rem}& .progress{position:absolute;left:-5px;width:5px;background-color:rgba(0,0,0,.25);border-radius:5px;& div{width:100%;height:100%;border-radius:5px;background-color:var(--secondary-blue)}}}}}@media screen and (min-width:1154px){.classes{padding:50px 6rem}}@media screen and (max-width:1024px){.classes{height:1200px;& h3{font-size:2.074rem}& .content-box{flex-direction:column-reverse;gap:1rem;& img{width:100%;align-self:center}}}}@media screen and (max-width:768px){.classes{& h3{font-size:1.2rem}.selector li span{display:none}}}@media screen and (max-width:430px){.classes{height:1150px}}