/* Adding variables */
@import url("../../css/variables.css");

.testimonial-hero__main-container {
    width: var(--full);
    padding: var(--padding);
    margin: var(--l-spacing) auto 0;
    background: var(--purple-gradient);
}

.testimonial-hero__inner-container {
    display: flex;
    gap: var(--l-spacing);
    width: var(--width);
    margin: 0 auto;
}

.testimonial-hero__image-container {
    display: flex;
    width: calc(var(--full) - 65%);
    max-width: 35%;
}

.testimonial-hero__image-container img {
    width: auto;
    max-width: 100%;
    margin-top: calc(-1 * var(--l-spacing));
}

.testimonial-hero__content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--m-spacing);
    width: calc(var(--full) - 35%);
    max-width: 65%;
}

.testimonial-hero__content-container p {
    font-size: var(--bigtext);
    font-weight: var(--light);
    line-height: var(--lh-2);
    color: white;
}

.testimonial-hero__name-container h5,
.testimonial-hero__name-container span {
    font-family: var(--work);
    font-size: var(--largetext);
    line-height: var(--lh-2);
    color: white;
}

.testimonial-hero__name-container h5 {
    font-weight: var(--semibold);
}

.testimonial-hero__name-container span {
    font-weight: var(--light);
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .testimonial-hero__main-container {
        margin: 0;
    }

    .testimonial-hero__inner-container {
        flex-direction: column-reverse;
        align-items: center;
    }

    .testimonial-hero__image-container {
        width: var(--half);
        max-width: var(--half);
    }

    .testimonial-hero__image-container img {
        margin: 0;
    }

    .testimonial-hero__content-container {
        width: var(--full);
        max-width: var(--full);
        padding: var(--l-spacing) 0 0;
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    
}