main .hero header {
    width: 100%;
    height: 16vh;
    padding: 2.5% 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static;
    top: 0;

    /* border-bottom: 0.1rem solid var(--secondary-color); */
}

main .hero header .logo a h1 {
    font: var(--fw-bold) var(--fs400) var(--font-logo);
}

main .hero header .logo a {
    color: var(--secondary-color);
}

@media (max-width: 1024px) {
    main .hero header .logo a h1 {
        font: var(--fw-bold) var(--fs300) var(--font-logo);
    }
}

@media (max-width: 805px) {
    main .hero header .logo a h1 {
        font: var(--fw-bold) var(--fs250) var(--font-logo);
    }
}

@media (max-width: 520px) {
    main .hero header .logo a h1 {
        font: var(--fw-bold) var(--fs200) var(--font-logo);
    }
}

@media (max-width: 400px) {
    main .hero header .logo a h1 {
        font: var(--fw-bold) var(--fs200) var(--font-logo);
    }
}

@media (max-width: 320px) {
    main .hero header .logo a h1 {
        font: var(--fw-bold) var(--fs100) var(--font-logo);
    }
}