.workshop-nav{display:flex;gap:1rem;margin:2rem 0 2rem calc(50% + 1rem);transition:translate .33s;&>button{all:unset;font-size:1.5rem;font-family:system-ui;font-weight:500;color:#ccc;transition:color .33s;flex-shrink:0;cursor:pointer}&[data-active="1"]{translate:0 0}&[data-active="2"]{translate:-308px 0}&[data-active="3"]{translate:-552px 0}&>button:focus{color:#333}&>[data-active=true]{color:#000;position:relative;z-index:1}&>button:before{content:"";position:absolute;top:70%;height:50%;left:10%;right:-2%;background-color:#ffff0040;z-index:-1;opacity:0}&>[data-active=true]:before{opacity:1}&>[data-active=true]:nth-child(2):before{background-color:#ff009940}&>[data-active=true]:nth-child(3):before{background-color:#003cff40}}.workshop-container{margin:2rem 0;display:flex;gap:2rem;min-height:500px;&[data-active="1"]>*>:nth-child(1){translate:0}&[data-active="2"]>*>:nth-child(1){translate:-100%}&[data-active="2"]>*>:nth-child(2){translate:0}&[data-active="3"]>*>:nth-child(1){translate:-100% 0}&[data-active="3"]>*>:nth-child(2){translate:-100% 0}&[data-active="3"]>*>:nth-child(3){translate:0}}.workshop-image-carousel{display:flex;position:relative;width:50%;overflow:hidden;border-radius:1rem;& picture{position:absolute;inset:0;translate:100% 0;transition:translate .33s;z-index:100}& picture,& img{object-fit:cover;width:100%}}.workshop-container>div{display:flex;position:relative;width:50%;overflow:hidden;&>article{position:absolute;inset:0;translate:100% 0;transition:translate .33s;width:100%;display:flex;flex-direction:column}&>:nth-child(1){translate:0}&>:nth-child(3){translate:200% 0}}@media (width < 768px){.workshop-nav{margin:2rem auto;&>button{font-size:1.125rem}&[data-active="2"]{translate:-50% 0}&[data-active="3"]{translate:-75% 0}}.workshop-container{flex-direction:column}.workshop-image-carousel{min-height:200px;max-height:250px}.workshop-container>div{width:100%;flex-grow:1}}