/* ---------- mobile ---------- */

* { 
    line-height: 1.33333;
    font-family: 'radio canada';
    /*font-family: 'karla';*/
    font-weight: 300;
}

h1 { 
    font-family: 'radio canada big';
    font-size: 2.75rem;
    font-weight: 400;
}

h2 { 
    font-family: 'radio canada big';
    font-size: 2rem;
    font-weight: 400;
}

h3,
.display-as-heading-lvl-3 { 
    font-family: 'radio canada big';
    font-size: 1.75rem;
    font-weight: 400;
}

p {
    font-size: 20px;
}

small { 
    font-size: 12px;
}

button { 
    font-size: 20px;
}

.display-as-bold {
    font-weight: 400;
}

div[class*="-container"] > h2 ~ p,
.fade-overlay p {
    line-height: 1.5;
}

/* ---------- tablet ---------- */

@media screen and (min-width: 48rem) {
    * { 
        line-height: 1.33333;
    }
    
    h1 { 
        font-family: 'radio canada big';
        font-size: 3rem;
        font-weight: 400;
    }

    h2 { 
        font-family: 'radio canada big';
        font-size: 2.5rem;
        font-weight: 400;
    }
    
    h3,
    .display-as-heading-lvl-3 { 
        font-family: 'radio canada big';
        font-size:  1.75rem;
        font-weight: 400;
    }

    p {
        font-size: 20px;
    }

    small { 
        font-size: 12px;
    }

    button {
        font-size: 20px;
    }

    .display-as-bold {
        font-weight: 400;
    }
}

/* ---------- laptop ---------- */

@media screen and (min-width: 90rem) {
    h1 { 
        font-family: 'radio canada big';
        font-size: 3.75rem;
        font-weight: 400;
    }

    h2 { 
        font-family: 'radio canada big';
        font-size: 3rem;
        font-weight: 400;
    }

    h3,
    .display-as-heading-lvl-3 { 
        font-family: 'radio canada big';
        font-size: 2rem;
        font-weight: 400;
    }

    p {
        font-size: 20px;
    }

    small { 
        font-size: 12px; 
    }

    button { 
        font-size: 20px; 
    }

    * { 
        line-height: 1.33333; 
    }

    .display-as-bold {
        font-weight: 400;
    }
}


/* ---------- mobile & tablet ---------- */

@media screen and (max-width: 1439px) {
    div[class*="-container"] > h2:has(~ p),
    div[class*="-container"] > h2:has(~ div),
    div[class*="-container"] > h2:has(+ iframe),
    div[class*="-container"] > h2:has(+ ul) {
        margin-bottom: 48px !important;
    }
}