/* gilda-display-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Gilda Display";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/gilda-display-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/poppins-v24-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/poppins-v24-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/poppins-v24-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Font for Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Gilda Display", serif;
    font-weight: normal;
    line-height: 1.1;
    margin-block: 0.5em;
}

/* Font for Bodt text */
p,
ul,
ol {
    font-family: "Poppins", sans-serif;
    line-height: 1.4;
    margin-block: 0.4em;
}

/* Spacing for h3, h4, … */
h3,
h4,
h5,
h6 {
    margin-top: 1.4em;
}

:root {
    --basic-font-size-h1: 1.65rem;
    --basic-font-size-h2: 1.4rem;
    --basic-font-size-h3: 1.2rem;
    --basic-font-size-h4: 1rem;
    --basic-font-size-p: 1rem;
}

h1 {
    font-size: var(--basic-font-size-h1);
}
h2 {
    font-size: var(--basic-font-size-h2);
}
h3 {
    font-size: var(--basic-font-size-h3);
}
h4 {
    font-size: var(--basic-font-size-h4);
}
p,
ul,
ol {
    font-size: var(--basic-font-size-p);
}

@media only screen and (min-width: 576px) {
    h1 {
        font-size: calc(var(--basic-font-size-h1) * 1.166);
    }
    h2 {
        font-size: calc(var(--basic-font-size-h2) * 1.166);
    }
    h3 {
        font-size: calc(var(--basic-font-size-h3) * 1.166);
    }
    h4 {
        font-size: calc(var(--basic-font-size-h4) * 1.166);
    }
    p,
    ul,
    ol {
        font-size: calc(var(--basic-font-size-p) * 1.0833);
    }
}
@media only screen and (min-width: 768px) {
    h1 {
        font-size: calc(var(--basic-font-size-h1) * 1.33);
    }
    h2 {
        font-size: calc(var(--basic-font-size-h2) * 1.33);
    }
    h3 {
        font-size: calc(var(--basic-font-size-h3) * 1.33);
    }
    h4 {
        font-size: calc(var(--basic-font-size-h4) * 1.33);
    }
    p,
    ul,
    ol {
        font-size: calc(var(--basic-font-size-p) * 1.166);
    }
}
@media only screen and (min-width: 992px) {
    h1 {
        font-size: calc(var(--basic-font-size-h1) * 1.5);
    }
    h2 {
        font-size: calc(var(--basic-font-size-h2) * 1.5);
    }
    h3 {
        font-size: calc(var(--basic-font-size-h3) * 1.5);
    }
    h4 {
        font-size: calc(var(--basic-font-size-h4) * 1.5);
    }
    p,
    ul,
    ol {
        font-size: calc(var(--basic-font-size-p) * 1.25);
    }
}