.slider {display: flex; align-items: center; justify-content: center; background:var(--bg-esd);padding-bottom: var(--padding-bottom);}
.container {height: 640px; display: flex; flex-wrap: nowrap; justify-content: start;max-width: 100%;}

.card {width: 80px;border-radius: .75rem; background-size: cover; cursor: pointer; overflow: hidden; border-radius: 2rem; margin: 0 10px; display: flex; align-items: flex-end;transition: .6s cubic-bezier(.28,-0.03,0,.99);
    box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.4);
}

.card > .row {color: white; display: flex; flex-wrap: nowrap;}

.card > .row > .slidericon {
    background: #223;
    color: white;
    border-radius: 50%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px;
}

.card > .row > .description {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    height: 80px;
    width: 520px;
    opacity: 0;
    transform: translateY(30px);
    transition-delay: .3s;
    transition: all .3s ease;
}

.sliderlink {width: 200px;text-align: center; font-family: SFPRODISPLAYMEDIUM; font-size:20px; color:#fff; border-radius: 100px; padding: 10px 20px; background: #222232; text-decoration: none; transition: all .3 ease;}
.sliderlink:hover {background:#3c4043; transition: all .3 ease;}

.description p {color: #b0b0ba; padding-top: 5px;}
.description h4 {text-transform: uppercase;}
input {display: none;}
input:checked + label {width: 962px;}
input:checked + label .description {opacity: 1 !important; transform: translateY(0) !important;}
input:checked + label video {max-width: 119%;margin-left: -100px;}

.card[for="c1"] {background-image: url('images/ESD-Verpackung.jpg');}
.card[for="c2"] {background-image: url('images/ESD-gefache.jpg');}
.card[for="c3"] {background-image: url('images/ESD-maeander.jpg');}
.card[for="c4"] {background-image: url('images/ESD-wickel.jpg');}
.card[for="c5"] {background-image: url('images/ESD-Verpackungen.jpg');}
.zahl {position: absolute; width: 50px; height: 50px; margin: 15px; bottom: 0px; left: 0px; background: #222232; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
label {position:relative;}


@media screen and (width < 1400px) {
    
    .container {height:313px}
    input:checked + label {width: 470px;}
    .card {width: 50px;}
    input:checked + label video {margin-left: -40px;}
    .card > .row > .description {height:47px;}
    .card > .row > .slidericon {width:35px; height:35px;margin: 8px;}
    .sliderlink {font-size:16px; padding-block:6px;}
    .zahl {position: absolute; width: 35px; height: 35px; margin: 8px;}
}


@media screen and (width < 800px) {
.container {flex-wrap: wrap; height:auto;justify-content: center;}
label {height:300px; margin-bottom: 20px;height: 80px;width: 100%;}
input:checked + label {width:100%; margin-bottom: 20px; height:60vw;}
input:checked + label {width:100%; margin-bottom: 20px;}
.card {width: 100%;margin-bottom: 20px;background-position: center center; height: 50px;}
    }