:root{--b1cd:#731f10;--b1cl:#f07;--b2cd:#000050;--b2cl:#03f;--b3cd:#00501d;--b3cl:#0f4;--b4cd:#554d00;--b4cl:#ff4e00;--b5cd:#300050;--b5cl:#8000ff;--black:#000;--white:#fff;--grey:#b5b4b4}.slider{width:100%;height:83vh;transition:all .25s ease-in;display:flex;transform:translate(0)}@media only screen and (max-width:1000px){.slider{height:100%}}.slider .box{grid-template-columns:repeat(2,1fr);align-items:center;width:100%;height:100%;display:grid;position:relative;overflow:hidden}@media only screen and (max-width:650px){.slider .box{grid-template-rows:repeat(2,1fr);grid-template-columns:1fr}}.slider .box .bg{transform-origin:0 100%;background-color:#0003;width:70%;height:100%;padding:2rem 2rem 2rem 20rem;position:absolute;left:-10%;transform:skew(7deg)}@media only screen and (max-width:800px){.slider .box .bg{width:65%}}@media only screen and (max-width:650px){.slider .box .bg{width:100%;height:70%;bottom:0;left:0;transform:skew(0)}}.slider .box .bg:before{content:"";background-color:inherit;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;transform:skew(10deg)}@media only screen and (max-width:650px){.slider .box .bg:before{background-color:#491309;width:100%;bottom:0;transform:skew(0)}}.details{z-index:100}.slider .box .details{grid-area:1/1/-1/span 1;padding:2rem}@media only screen and (max-width:650px){.slider .box .details{grid-area:2/1/span 1/-1;padding:1rem}}@media only screen and (max-width:800px){.slider .box .details p{margin-right:0}}.slider .box .details button{color:var(--white);cursor:pointer;border:none;border-radius:2rem;outline:none;padding:1rem 3rem;transition:all .3s}.slider .box .details button:hover{opacity:.8}.slider .illustration{grid-area:1/2/-1/-1;justify-self:center}@media only screen and (max-width:650px){.slider .illustration{grid-area:1/1/span 1/-1;justify-content:center;align-items:center;display:flex}}.slider .illustration div{background-color:var(--b1cl);z-index:1;border-radius:3rem;width:18rem;height:25rem;position:relative;transform:skew(-10deg)}@media only screen and (max-width:800px){.slider .illustration div{width:15rem;height:20rem}}.slider .illustration div:before,.slider .illustration div:after{content:"";z-index:-1;background-color:#ffffff4d;border-radius:3rem;width:100%;height:100%;position:absolute;top:0;left:0}.slider .illustration div:after{transform:translate(4rem,-1rem)}.slider .illustration div:before{transform:translate(2rem,-2rem)}@media only screen and (max-width:650px){.slider .illustration div:after{transform:translate(2rem,-1rem)}.slider .illustration div:before{transform:translate(1rem,-2rem)}}.slider .box1{background-color:var(--b1cd)}.slider .box1 .illustration div{z-index:100;background-color:#9b111e}.trail{z-index:100;text-align:center;grid-template-columns:repeat(5,1fr);gap:1rem;width:60%;font-size:1.5rem;display:grid;position:absolute;bottom:5%;left:50%;transform:translate(-50%)}@media only screen and (max-width:650px){.trail{width:90%;bottom:13%}}.trail div{cursor:pointer;opacity:.3;border-top:3px solid #fff;padding:2rem;transition:all .3s}.trail div:hover{opacity:.6}@media only screen and (max-width:650px){.trail div{padding:1rem}}