.hero {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: self-start;
    width: 90vw;
}

.generos {
    width: 30%;
    margin: 1rem;
    border: 2px solid black;
    padding: 1rem 2rem;
    box-shadow: -2px 3px 0px 1px black;
    transition: 0.3s ease-in;
}

.generos:hover {
    background-color: brown;
    color: white;
    transform: translate(4px, -4px);
}



@media (max-width:1000px) {
    .generos {
        width: 100%;
    }

    .logo {
        width: 20rem;
    }
}