h1, h2 {
    font-family: 'Audiowide', sans-serif;
    text-transform: uppercase;
}

h1 {
    font-size: 100px !important;
}

h2 {
    font-size: 64px !important;
    font-weight: 400 !important;
    line-height: 120% !important;

    display: flex;
}

h2::after {
    content: '';
    background: var(--circle-title);
    background-size: contain;
    border-radius: 50%;
    position: relative;

    top: 10px;
    left: 16px;
    width: 20px;
    height: 20px;
}

.title--circle {
    position: relative;
}

.title--circle:after {
    content: '';
    position: absolute;
    top: 10px;
    right: -35px;
    left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--circle-title);
}

h3, h4 {
    font-family: 'SF Pro Display', sans-serif !important;
    line-height: 120% !important;
}

h3 {
    font-size: 32px !important;
    font-weight: 700 !important;
}

h4 {
    font-size: 28px !important;
    font-weight: 600 !important;;
}

@media screen and (max-width: 1024px) {
    h1 {
        font-size: 63px !important;
    }

    h2 {
        font-size: 56px !important;
    }

    h3 {
        font-size: 32px !important;
    }

    h4 {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 44px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    h3 {
        font-size: 22px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    .title--circle:after {
        top: 2px;
        right: -35px;
        width: 10px !important;
        height: 10px !important;
    }
}

@media screen and (max-width: 768px) {
    h2::after {
        top: 4px;
        left: 8px;
        width: 10px;
        height: 10px;
    }
}