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

.custom-quote__main-container {
    width: var(--width);
    padding: var(--padding);
    margin: 0 auto;
}

.custom-quote__inner-container {
    max-width: 80%;
    padding: var(--m-spacing) 0;
    margin: 0 auto;
}

.custom-quote__content-container {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing);
    padding: var(--s-spacing);
}

.single-post-entry__content-container .custom-quote__main-container {
    width: var(--full);
}

.custom-quote__content-container blockquote {
    position: relative;
    font-size: var(--blocknav);
    font-weight: var(--light);
    line-height: var(--lh-2);
}

.custom-quote__content-container blockquote {
    position: relative;
    font-size: var(--blocknav);
    font-weight: var(--light);
    line-height: var(--lh-2);
}

.custom-quote__content-container blockquote strong {
    font-weight: var(--regular);
    color: var(--neopaleblue);
}

.custom-quote__content-container blockquote p:last-of-type {
    margin-bottom: 0;
}

.custom-quote__content-container blockquote:before {
    position: absolute;
    content: url("../../images/quotes-open.svg");
    width: 40px;
    top: -10px;
    left: -60px;
}

.custom-quote__content-container blockquote:after {
    position: absolute;
    content: url("../../images/quotes-close.svg");
    width: 40px;
    bottom: -50px;
    right: -60px;
}

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

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .custom-quote__inner-container {
        max-width: 85%;
    }

    .custom-quote__content-container blockquote:before {
        width: 35px;
        left: -60px;
    }

    .custom-quote__content-container blockquote:after {
        width: 35px;
        bottom: -90px;
        right: -60px;
    }
}