:root {
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-sans-serif-condensed: "DINNextW01-CondensedMed", "AvenirNextCondensed-Bold", "Futura-CondensedExtraBold", HelveticaNeue-CondensedBold, "Ubuntu Condensed", "Liberation Sans Narrow", "Franklin Gothic Demi Cond", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Arial, "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
    --font-family-serif: Georgia, Times, Times New Roman, serif;
    --font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.condensed {
    font-family: var(--font-family-sans-serif-condensed);
    font-stretch: condensed;
}

* {
    font-family: 'Bebas Neue'
}

.info {
    padding: 20px 0;
    background-color: red;
    color: #fff;
    text-align: center;
}

.info__wrapper {
    max-width: 992px;
    margin: 0 auto;
}

.info h3 {
    font-family: var(--font-family-sans-serif);
    font-stretch: condensed;
    font-size: 2rem;
}

.info p,
.info p span,
.info p strong {
    font-family: var(--font-family-sans-serif);
    font-stretch: condensed;
    font-size: 1.2rem;
}

@media screen and (max-width: 1920px) {
    .info h3 {
        font-size: 2rem;
    }

    .info p,
    .info p span,
    .info p strong {
        font-size: 1.2rem;

    }
}

@media screen and (max-width: 768px) {
    .info h3 {
        font-size: 3rem;
    }

    .info p,
    .info p span,
    .info p strong {
        font-size: 2rem;
    }
}