/* reviews */

.reviews__section {
    margin-block: 6rem 7rem
}

.reviews__section__container {
    -webkit-flex-direction: column;
    flex-direction: column;
    max-width: 100%
}

.reviews__viewport,
.reviews__container {
    position: relative;
    overflow: hidden;
    -webkit-transition: var(--quick-transition);
    transition: var(--quick-transition);
    width: 100%
}

.reviews__list {
    -webkit-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    -webkit-transform: translateX(270%);
    transform: translateX(270%);
    height: 100%;
    width: 100%
}

.review {
    min-width: 90%;
    padding-inline: 2rem;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%
}

button[data-slider-button] {
    display: none
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 6px;
    border: 2px solid #000;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    -webkit-transition: background-color .6s;
    transition: background-color .6s;
    cursor: pointer
}

.dot.active {
    background: #000
}

@media screen and (min-width:550px) {

    .reviews__section__container {
        max-width: 80%
    }

    .review {
        padding-inline: 4rem
    }
}

@media screen and (min-width:1250px) {
    .review p {
        white-space: pre-line
    }

    .reviews__section__container {
        max-width: 55%
    }

    .reviews__viewport {
        max-width: 90%
    }

    .review {
        padding-inline: 5rem
    }

    button[data-slider-button] {
        display: block;
        position: absolute;
        top: calc(50% - 15px);
        border: unset;
        background: unset;
        cursor: pointer;
        -webkit-transition: var(--quick-transition);
        transition: var(--quick-transition);
        pointer-events: all;
        padding: 0;
        z-index: 3
    }

    button[data-slider-button] svg {
        height: 30px;
        width: 30px;
        opacity: 1
    }

    button.next {
        right: 2.5rem
    }

    button.prev {
        left: 2.5rem
    }

    .dot {
        margin: 0 4px
    }

    .review p {
        white-space: inherit
    }
}

@media screen and (min-width:1650px) {

    .reviews__section__container {
        max-width: 60%
    }

    .review p {
        margin: 2rem 0
    }

    .review {
        padding-inline: 7rem
    }

    button.prev {
        left: 6rem
    }

    button.next {
        right: 6rem
    }
}