.swiper-container {
    overflow: hidden;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    @media (min-width: 1200px) {
        min-height: 320px;
    }
    &-wrapper {
        display: flex;
        flex-flow: column nowrap;
        @media (min-width: 1200px) {
            flex-flow: row nowrap;
        }
        height: 100vh;
        width: 100vw;
    }
}

.swiper-button {
    &-next,
    &-prev {
        color: #000;
    }
}

.swiper-slide {
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: #fff;

    /* Center slide text vertically */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    /* Slide content */
    .description,
    .title {
        display: block;
        opacity: 0;
        transition: 0.5s ease 0.5s;
    }
    &-active {
        .description,
        .title {
            opacity: 1;
        }
        .title {
            margin-bottom: 0.5rem;
            font-size: 24px;
            color: #000;
            transition: opacity 0.5s ease 0.5s;
        }
        .description {
            font-size: 16px;
            color: #777;
            transition: opacity 0.5s ease 0.75s;
        }
    }
}

.gallery-top {
    position: relative;
    width: 100%;
    height: 50vh;
    @media (min-width: 1200px) {
        width: 80%;
        height: 50vh;
        margin-right: 10px;
    }
}

.gallery-thumbs {
    width: 100%;
    height: 20vh;
    padding-top: 10px;
    @media (min-width: 1200px) {
        width: 20%;
        height: 50vh;
        padding: 0;
    }
    .swiper-wrapper {
        flex-direction: row;
        @media (min-width: 1200px) {
            flex-direction: column;
        }
    }
    .swiper-slide {
        width: 25%;
        flex-flow: row nowrap;
        @media (min-width: 1200px) {
            flex-flow: column nowrap;
            width: 100%;
        }
        height: 100%;
        opacity: 0.75;
        cursor: pointer;
    }
    .swiper-slide-thumb-active {
        opacity: 1;
    }
}