/* Minification failed. Returning unminified contents.
(6,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(7,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(8,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(31,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(38,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(46,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(47,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(53,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(66,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(68,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(79,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(91,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(99,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(100,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(108,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(117,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(118,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(124,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(132,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(133,29): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(134,25): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(140,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(155,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(159,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(173,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(178,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
 */
/*--------------------------------
    FEEDBACK / TESTIMONIALS
--------------------------------*/

#feedback {
    margin-top: var(--margin-80px);
    margin-bottom: var(--margin-80px);
    padding: 0 var(--base-padding-x);
}

#feedback-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9vw;
    align-items: start;
}

#feedback-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

#feedback .feedback-card {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: var(--text-gap-lg);
    min-height: clamp(260px, 34vh, 420px);
    transition: transform .5s ease;
}

#feedback .feedback-paragraph {
    font-size: clamp(16px, 1.2vw, 24px);
    line-height: var(--lh-body);
    max-width: 60ch;
}

#feedback .feedback-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--text-gap-md);
    margin-top: var(--text-gap-md);
}

#feedback .feedback-author img {
    width: clamp(56px, 5vw, 80px);
    height: clamp(56px, 5vw, 80px);
    border-radius: var(--radius-card);
    object-fit: cover;
    flex: 0 0 auto;
}

#feedback .feedback-author > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

#feedback .feedback-author .name {
    color: var(--tertiary-color);
    font-size: clamp(16px, 1.2vw, 22px);
    line-height: var(--lh-heading);
}

#feedback .feedback-author p {
    text-align: right;
}

#feedback-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--text-gap-sm);
}

#feedback-title p {
    max-width: 48ch;
}

#feedback-progress {
    display: flex;
    column-gap: 3vw;
    align-items: center;
    width: 100%;
    margin-top: var(--margin-40px);
}

#progress-bar {
    width: 80%;
    height: 4px;
    border-radius: 2px;
    display: block;
    background-color: var(--tertiary-color);
    margin-top: var(--margin-40px);
}

#progress {
    width: 0;
    height: 4px;
    border-radius: 2px;
    display: block;
    background-color: var(--secondary-color);
    transition: width .5s;
}

#progress-number {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    column-gap: .5vw;
    margin-top: var(--margin-40px);
    color: var(--tertiary-color);
    font-size: clamp(16px, 1.2vw, 24px);
}

#current-slide,
#total-slides {
    color: var(--secondary-color-text);
}

@media only screen and (max-width: 767px) {
    #feedback {
        width: 100%;
        height: auto;
        min-height: 0;
        margin-top: var(--margin-80px);
        margin-bottom: var(--margin-80px);
        padding: 0 var(--base-padding-x);
    }

    #feedback-wrapper {
        display: flex;
        flex-direction: column-reverse;
        row-gap: var(--margin-40px);
        width: 100%;
    }

    #feedback-title {
        width: 100%;
        margin-top: 0;
    }

    #feedback-container {
        width: 100%;
    }

    #feedback .feedback-card {
        min-height: auto;
        row-gap: var(--text-gap-lg);
    }

    #feedback .feedback-author {
        margin-top: var(--text-gap-md);
    }

    #feedback .feedback-author img {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    #feedback .feedback-author .name {
        font-size: clamp(16px, 4vw, 20px);
    }

    #feedback-progress {
        margin-top: var(--text-gap-md);
    }

    #progress-bar,
    #progress-number {
        margin-top: var(--text-gap-md);
    }
}