:root {
    --font-family: "Manrope", sans-serif;
    --second-family: "Cormorant Garamond", sans-serif;

	--gray-80: #4d4d4e;
	--gray-70: #737673;
	--gray-60: #778a94;
	--gray-20: #9eb4bf;
	--gray-0: #fff;
	--primary-100: #008fca;
	--primary-5: #edf2f3;
	--primary-15: #cad6dc;
	--green-10: #eff7e3;
	--green-80: #52c61b;
	--primary-1: #f7feff;
	--green-1: #f6fff7;
	--green-5: #e6f9e8;
	--violet-100: #7c5ac9;
	--violet-30: #eee6ff;
	--violet-10: #f5f0ff;
	--orange-100: #d97706;
	--orange-30: #ffedcc;
	--orange-10: #fff7e8;
}

@font-face {
    font-family: "Manrope";
    src: url('../fonts/Manrope-Regular.woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url('../fonts/Manrope-Medium.woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url('../fonts/Manrope-SemiBold.woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url('../fonts/Manrope-Bold.woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url('../fonts/CormorantGaramond-Regular.woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url('../fonts/CormorantGaramond-Bold.woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

.post-page__quote {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    background-color: var(--primary-5);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 36px;

    @media(max-width: 768px) {
        column-gap: 24px;
    }

    @media(max-width: 576px) {
        column-gap: 16px;
    }

    &::before {
        content: '';
        display: block;
        width: 56px;
        aspect-ratio: 1;
        flex-shrink: 0;
        background-image: url('../images/quote.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        @media(max-width: 768px) {
            width: 44px;
        }

        @media(max-width: 576px) {
            width: 36px;
        }
    }

    .post-page__quote-title {
        font-family: var(--second-family);
        font-weight: 700;
        font-size: 28px;
        line-height: 1.2;
        color: var(--gray-80);
        margin-bottom: 16px;

        @media(max-width: 1024px) {
            font-size: 22px;
        }

        @media(max-width: 768px) {
            font-size: 20px;
        }
        
    }

    .post-page__quote-source {
        font-family: var(--second-family);
        font-weight: 700;
        font-size: 28px;
        color: var(--gray-80);

        @media(max-width: 1024px) {
            font-size: 22px;
        }

        @media(max-width: 768px) {
            font-size: 20px;
        }
    }
}