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

html, body {
    height: 100%;
}

body {
    background-color: #1f2029;
}

.wrapper {
    display: flex;
    align-items: center;
    height: 50%;
}

.slide-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    padding-bottom:  50px;
    margin: 0 220px 100px 0;
    height: 50%;
}

.slide-list {
    display: flex;
}

.slide-item {
    cursor: grab;
    flex-shrink: 0;
    padding: 5px;
    width: 65vw;
}

.slide-content {
    border-radius: 10px;
    border: 1px solid #fff;
    box-shadow: #070707 0px 6px 6px;
    position: relative;
}

.slide-image {
    border-radius: 10px;
    width: 89%;
    height: 0%;
}

.slide-description {
    border-radius: 10px;
    background: linear-gradient(to top, #000, transparent);
    color: #fff;
    position: absolute;
    padding: 30px;
    bottom: 0;
    width: 100%;
}

.slide-description h3 {
    font-family: 'Koulen', sans-serif;
    font-size: 48px;
    position: relative;
    top: 16px
}

.slide-description p {
    font-family: 'PT Sans', sans-serif;
    font-size: 24px;
}

.slide-nav-button {
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 36px;
    position: absolute;
    z-index: 2;
}

.slide-nav-previous {
    left: 20px;
    color: #be961e;
}

.slide-nav-next {
    right: 20px;
    color: #be961e;
}

.slide-controls {
    margin: auto 0;
}

.slide-control-button {
    color: #fff;
    cursor: pointer;
    background: transparent;
    font-size: 18px;
    margin: 0 5px;
}

.slide-control-button.active {
    color:  #be961e;
}

@media screen and (max-width: 768px) {
    .slide-description {
        padding: 10px;
    }
    
    .slide-description h3 {
        font-size: 24px;
        top: 0;
    }

    .slide-description p {
        display: none;
    }

    .slide-nav-button {
        margin-top: -20px;
        font-size: 28px;
        color:  #be961e;
    }
    
    .slide-nav-previous {
        left: 10px;
        color:  #be961e;
    }
    
    .slide-nav-next {
        right: 5px;
        color: #be961e
    }

    .slide-controls {
        margin: 10px auto 0;
    }

    .slide-control-button {
        font-size: 14px;
    }
}