#hero {
    height: 640px;
}

.header-title-container {
    position: absolute;
    --top-gap: calc(var(--navbar-gap-top) + var(--navbar-height) / 2);
    height: calc(100% - var(--top-gap));
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--top-gap);
    text-align: center;
}

.header-title-text {
    font-family: var(--header-font);;
}