.gallery-container {
    overflow: hidden;
    position: relative;
    width: 80%;
    height: 250px;
    min-width: 250px;
    margin-bottom: 20px;
    padding: 30px 0;
}

.gallery-card {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 70%;
    height: 90%;
    top: 5%;
    min-width: 200px;
    z-index: -1;
    opacity: 0;

    border-color: #66afe9;
    box-shadow:  0 0 8px rgba(102,175,233,.6);
  }

.gallery-card.active{
    opacity: 1;
    z-index: 1;
}

.gallery-card-title {
    font-size: 24px;
    margin-bottom: 15px;

}

#galleryBack, #galleryNext {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    height: 90%;
    min-width: 30px;
    width: 10%;
    top: 5%;
}

#galleryBack {
    left: 0;
}

#galleryNext {
    right: 0;
}

.out-forward, .out-backward {
    transition: transform .5s, opacity .5s linear;
    animation-duration: 0.5s;
    z-index: 2;
}
.out-forward {
    animation-name: fadeOutForward;
}

.out-backward {
    animation-name: fadeOutBackward;
}

@media screen and (min-width: 768px) {
    .gallery-container {
        height: 350px;
    }
    .gallery-card-title{
        font-size: 30px;
        margin-bottom: 24px;
    }
    .gallery-card {
        max-width: 850px;
    }
    #galleryBack, #galleryNext {
        position: absolute;
        z-index: 999;
        height: 90%;
        width: 50px;
        top: 5%;
        cursor: pointer;
    }
    #galleryBack {
        left: 5%;
    }
    
    #galleryNext {
        right: 5%;
    }
    
}
@media screen and (min-width: 1000px) {
    #galleryBack, #galleryNext {
        width: 70px;
    }
}

@media screen and (min-width: 1400px) {
    #galleryBack {
        left: 7%;
    }
    
    #galleryNext {
        right: 7%;
    }
}

@media screen and (min-width: 1700px) {
    #galleryBack {
        left: 12.5%;
    }
    
    #galleryNext {
        right: 12.5%;
    }
}

@media screen and (min-width: 1900px) {
    #galleryBack {
        left: 17%;
    }
    
    #galleryNext {
        right: 17%;
    }
}

@keyframes fadeOutForward {
    from {
        opacity: 1;
        transform: translateX(0px);
    }
    to {
        opacity: 0;
        transform: translateX(200px);
    }
}

@keyframes fadeOutBackward {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-200px);
    }
}