#hero {
    margin-bottom: -7px;
    height: calc(100vh - 107px);
    overflow: hidden;
}

#hero img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    transform: scale(1.05);
    animation: zoomIn 10s;
}

#hero-text {
    top: 70%;
    left: 50%;
    translate: -50% -50%;
    text-shadow: rgba(0, 0, 0, 0.7) 0 2px 3px;
    max-width: 90vw;
}

#hero-h1 {
    color: var(--gold);
    letter-spacing: 2px;
    font-size: 35px;
}

.article-wrapper .btn, .article-wrapper button {
    background-color: var(--gold);
    color: white;
    border: none;
}

@media (min-width: 768px) {
    #hero-h1 {
        font-size: 50px;
    }

    #hero-text {
        max-width: 70vw;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}