.carousel{--size-arrow:20px;--size-border:5px;grid-template-rows:90% 1fr;grid-template-columns:100px 1fr 100px;place-items:center;height:100vh;display:grid;position:relative}.carousel>.arrow{z-index:10;cursor:pointer;background-color:#00000040;border-radius:50%;grid-row:1/3;padding:15px;transition:background-color .3s;position:relative}.carousel>.arrow>div{box-sizing:border-box;width:var(--size-arrow);height:var(--size-arrow);border-top:var(--size-border)solid #ffffffd9;border-right:var(--size-border)solid #ffffffd9;transition:border .3s}.carousel>.leftBtn{grid-column:1/2}.carousel>.leftBtn>div{transform:translate(20%)rotate(-135deg)}.carousel>.rightBtn{grid-column:3/4}.carousel>.rightBtn>div{transform:translate(-20%)rotate(45deg)}.carousel>.arrow:hover{background-color:#00000080}.carousel>.arrow:hover>div{border-top:var(--size-border)solid #fff;border-right:var(--size-border)solid #fff}.carousel>.caruselBar{z-index:20;grid-area:2/2/3/3;justify-content:center;width:100%;display:flex;position:relative}.carousel>.caruselBar>.elemBar{box-sizing:content-box;opacity:.25;cursor:pointer;background-color:#fff;background-clip:padding-box;border:5px solid #fff0;width:20%;max-width:50px;height:5px;margin:0;transition:opacity .3s}.carousel>.caruselBar>.elemBar.show,.carousel>.caruselBar>.elemBar:hover{opacity:.85}.carousel>.imgBox{grid-area:1/1/3/4;width:100%;height:100vh;position:relative}.carousel>.imgBox>.elemCarusel{pointer-events:none;opacity:0;grid-template-rows:1fr;grid-template-columns:1fr;place-items:center;width:100%;height:100vh;transition:opacity .8s;display:grid;position:absolute}.carousel>.imgBox>.elemCarusel.show{pointer-events:auto;opacity:1}.carousel>.imgBox>.elemCarusel>img{z-index:10;grid-area:1/1/2/2;width:auto;max-width:none;height:100vh;position:absolute}.carousel>.imgBox>.elemCarusel>div{width:calc(100% - 200px);color:var(--base-white);text-align:center;z-index:20;background-color:#00000059;flex-direction:column;grid-area:1/1/2/2;align-items:center;padding:20px 50px;display:flex;position:relative}.carousel>.imgBox>.elemCarusel>div h2{font-size:4rem;font-weight:400;line-height:100%}.carousel>.imgBox>.elemCarusel>div p{margin-top:10px;font-size:1rem;font-weight:400}.carousel>.imgBox>.elemCarusel>div .orangeBtn{margin-top:20px}@media (max-width:800px){.carousel>.leftBtn,.carousel>.rightBtn{grid-row:2/3}.carousel>.imgBox{max-width:100vw;overflow:hidden}.carousel{grid-template-columns:50px 1fr 50px}.carousel>.imgBox>.elemCarusel>div{width:100%;max-width:100vw}.carousel>.imgBox>.elemCarusel>div h2{font-size:3rem}}