.hero {
    position: relative;
    overflow: hidden;
    height: 90vh;
    /* igual ao seu design original */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ====== Estado padrão (desktop) ====== */
.hero-img {
    display: block;
    /* remove espaços em branco indesejados */
    width: 100%;
    /* ocupa toda a largura do container */
    height: auto;
    /* ajusta a altura pra manter proporção */
    /* opcionalmente: centraliza à medida que diminui */
    max-width: 100%;
}

.hero-content {
    position: absolute;
    /* tira do fluxo e posiciona em relação ao .hero */
    top: 60%;
    /* 50% da altura do .hero */
    left: 50%;
    /* 50% da largura do .hero */
    transform: translate(-50%, -50%);
    /* puxa o próprio centro para o ponto definido */
    z-index: 1;
    /* garante que fique acima da imagem */
    text-align: center;
    /* centraliza o <a> dentro do próprio bloco */
    width: 100%;
    /* opcional: expande o bloco pra toda a largura, se preferir */
}