*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}

.container {position: relative; overflow: hidden;}
.slider {
display: flex;
width: 500%;
height: 700px;
transition: all 0.25s ease-in;
transform: translateX(0);
}
@media only screen and (max-width: 1000px) {
.slider {height: 100vh;}
}
.slider .box {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
overflow: hidden;
position: relative;
}
@media only screen and (max-width: 650px) {
.slider .box {grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr);}
}
.slider .box .bg {
padding: 2rem;
background-color: rgba(0, 0, 0, 0.2);
width: 55%;
transform: skewX(7deg);
position: absolute;
height: 100%;
left: -10%;
padding-left: 20rem;
transform-origin: 0 100%;
}
@media only screen and (max-width: 800px) {
.slider .box .bg {width: 65%;}
}
@media only screen and (max-width: 650px) {
.slider .box .bg {width: 100%; left: 0; bottom: 0; height: 54%; transform: skewX(0deg); }
}
.slider .box .bg::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: inherit;
pointer-events: none;
transform: skewX(10deg);
}
@media only screen and (max-width: 650px) {
.slider .box .bg::before {width: 120%; bottom: 0; transform: skewX(0deg); }
}
.slider .box .details {
padding: 5rem;
padding-left: 10rem;
z-index: 100;
grid-column: 1/span 1;
grid-row: 1/-1;
}
@media only screen and (max-width: 650px) {
.slider .box .details {
grid-row: 2/span 1;
grid-column: 1/-1;
text-align: center;
padding: 2rem;
transform: translateY(-9rem);
}
}
.slider .box .details h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.slider .box .details p {
display: inline-block;
font-size: 1.3rem;
color: white;
margin-bottom: 2rem;
margin-right: 5rem;
}
@media only screen and (max-width: 800px) {
.slider .box .details p {
margin-right: 0;
}
}
.slider .box .details button {
padding: 1rem 3rem;
color: #fff;
border-radius: 2rem;
outline: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.slider .box .details button:hover {
opacity: 0.8;
}
.slider .box .details button:focus {
outline: none;
border: none;
}
.slider .illustration img {width: 90%; height: auto;}
.slider .box1 { background-color: var(--color-two);}
.slider .box1 .illustration .inner { background-color: #FF0077;}
.slider .box1 .illustration .inner::after, .slider .box1 .illustration .inner::before { background-color: rgba(255, 0, 119, 0.4);}
.slider .box1 button { background-color: #FF0077;}
.slider .box2 { background-color: var(--light-grey);}
.slider .box2 .illustration .inner { background-color: #0033FF;}
.slider .box2 .illustration .inner::after, .slider .box2 .illustration .inner::before { background-color: rgba(0, 51, 255, 0.4);}
.slider .box2 button {background-color: #0033FF;}
.slider .box3 {background-color: var(--color-three);}
.slider .box3 .illustration .inner {background-color: #00FF44;}
.slider .box3 .illustration .inner::after, .slider .box3 .illustration .inner::before {background-color: rgba(0, 255, 68, 0.4);}
.slider .box3 button {background-color: #00FF44;}
.slider .box4 {background-color: var(--color-five);}
.slider .box4 .illustration .inner {background-color: #FF4E00;}
.slider .box4 .illustration .inner::after, .slider .box4 .illustration .inner::before {background-color: rgba(255, 78, 0, 0.4);}
.slider .box4 button {background-color: #FF4E00;}
.slider .box5 {background-color: var(--color-six);}
.slider .box5 .illustration .inner {background-color: #8000FF;}
.slider .box5 .illustration .inner::after, .slider .box5 .illustration .inner::before {background-color: rgba(128, 0, 255, 0.4);}
.slider .box5 button {background-color: #8000FF;}
.slider .illustration {grid-column: 2/-1; grid-row: 1/-1; justify-self: center; text-align: center;}
@media only screen and (max-width: 650px) {
.slider .illustration {
grid-row: 1/span 1;
grid-column: 1/-1;
display: flex;
justify-content: center;
align-items: center;

}
}
.slider .illustration div {
height: 25rem;
width: 18rem;
border-radius: 3rem;
background-color: #FF0077;
position: relative;
transform: skewX(-10deg);
}
@media only screen and (max-width: 800px) {
.slider .illustration div {
height: 20rem;
width: 15rem;
}
}
.slider .illustration div::after, .slider .illustration div::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border-radius: 3rem;
top: 0;
left: 0;
}
.slider .illustration div::after {
transform: translate(4rem, -1rem);
}
.slider .illustration div::before {
transform: translate(2rem, -2rem);
}

.prev,
.next,
.trail {
z-index: 10000;
position: absolute;
}

.prev,
.next {
width: 4rem;
cursor: pointer;
opacity: 0.2;
transition: all 0.3s ease;
}
@media only screen and (max-width: 650px) {
.prev,
.next {
display: none;
}
}
.prev:hover,
.next:hover {
opacity: 1;
}

.prev {
top: 50%;
left: 2%;
transform: translateY(-50%);
}

.next {
top: 50%;
right: 2%;
transform: translateY(-50%);
}

.trail {
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
text-align: center;
font-size: 1.5rem;
}
@media only screen and (max-width: 650px) {
.trail {
width: 90%;
bottom: 13%;
}
}
.trail div {
padding: 2rem;
border-top: 3px solid #fff;
cursor: pointer;
opacity: 0.3;
transition: all 0.3s ease;
}
.trail div:hover {
opacity: 0.6;
}
@media only screen and (max-width: 650px) {
.trail div {
padding: 1rem;
}
}

.active {
opacity: 1 !important;
}