:root {
    --header-height: 175px;
    --header-logo-top: 37px;
    --header-logo-left: 48px;
    --header-logo-position: initial;
    --header-socials-top: 13px;
    --header-socials-right: 23px;
    --header-socials-gap: .5rem;
    --header-socials-icon-size: 16px;
    --header-ground-image: url('/landing/header-article-background-mobile.png?v=1.0.0');
    --header-background-size: 110% 100%;

    --content-width: 100%;
    --content-margin: 1rem auto 0 auto;
    --content-header-color: var(--primary-font);
    --content-back-home-display: none;
    --content-reading-clock-display: none;
    --content-reading-clock-primary-display: flex;
    --content-h2-size: 30px;
    --content-h3-size: 24px;
    --content-h4-size: 18px;
    --content-h5-size: 16px;

    --article-flex-direction: column;
    --article-height: auto;
    --article-reading-time-display: flex;
    --article-picture-width: 100%;
    --article-content-width: 100%;
    --article-picture-height: 300px;
    --article-picture-image-width: 130%;
    --article-picture-intersect-transform: none;
    --article-picture-intersect-top: auto;
    --article-picture-intersect-left: auto;
    --article-content-text-line-clamp: 3;
    --article-picture-intersect-bottom-hover: -1px;
    --article-content-page-title: 28px;
    --article-content-page-title-weight: 800;
    --article-content-page-paragraph-line-height: 160%;
    --article-content-page-title-line-height: 103%;

    --footer-content-width: 100%;
}

@media screen and (min-width: 576px) {
    :root {
        --header-height: 265px;
        --header-background-size: 110% 100%;
        --header-ground-image: url('/landing/header-article-background-desktop.png?v=1.0.0');
    }
}

@media screen and (min-width: 768px) {
    :root {
        --header-height: 265px;
        --header-background-size: 100% 150%;

        --footer-content-width: 750px;
    }
}

@media screen and (min-width: 992px) {
    :root {
        --header-height: 550px;
        --header-logo-position: absolute;
        --header-socials-top: 34px;
        --header-socials-right: 42px;
        --header-socials-gap: .75rem;
        --header-socials-icon-size: 24px;
        --header-background-size: 110% 100%;

        --content-width: 550px;
        --content-margin: calc(calc(var(--header-height) - 70px) * -1) auto 0 auto;
        --content-header-color: var(--color-white);
        --content-back-home-display: flex;
        --content-reading-clock-display: flex;
        --content-reading-clock-primary-display: none;
        --content-h2-size: 36px;
        --content-h3-size: 30px;
        --content-h4-size: 24px;
        --content-h5-size: 18px;

        --article-flex-direction: row;
        --article-height: 200px;
        --article-reading-time-display: none;
        --article-picture-width: 40%;
        --article-content-width: 60%;
        --article-picture-height: auto;
        --article-picture-image-width: 180%;
        --article-picture-intersect-transform: rotate(-90deg);
        --article-picture-intersect-top: -10%;
        --article-picture-intersect-left: 1px;
        --article-content-link-display: none;
        --article-content-text-line-clamp: 1;
        --article-content-page-title-weight: 900;
        --article-content-page-title: 30px;
        --article-content-page-title-line-height: 110%;
        --article-content-page-paragraph-line-height: 140%;
    }
}

@media screen and (min-width: 1200px) {
    :root{
        --header-background-size: 100% 100%;

        --content-width: 700px;

        --footer-content-width: 1150px;

        --article-picture-width: 30%;
        --article-content-width: 70%;
        --article-picture-image-width: 150%;
        --article-content-text-line-clamp: 2;
    }
}

@media screen and (min-width: 1300px) {
    :root{
        --footer-content-width: 1150px;
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --header-background-size: 100% 110%;

        --footer-content-width: 1200px;
    }
}