@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
*{margin: 0; padding: 0; font-family: 'Roboto', sans-serif;}
div#noticias{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div#mydestaques{display: flex;}
div#destaque{
    width: 400px;
    height: 500px;
    background-size: cover;
    background-position: center;
    transition: ease 1s;
}
div#destaque:hover{
    cursor: pointer;
    opacity: 0.5;
}
div#destaque div{
    padding-left: 30px;
    width: 400px;
    height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

div#mysubdestaques{display: flex;}
div#subdestaque{
    width: 294px;
    height: 200px;
    margin: 6px 4px;
    background-size: cover;
    background-position: center;
    transition: ease 1s;
}
div#subdestaque:hover{
    cursor: pointer;
    opacity: 0.5;
}
div#subdestaque div{
    padding-left: 30px;
    width: 300px;
    height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

h2{color: white; text-shadow: 0px 0px 20px black; max-width: 340px; margin: 5px 0}
h4{color: white; text-shadow: 0px 0px 20px black; max-width: 250px;}
span#destaque{color: white; text-shadow: 0px 0px 20px black; border: thin solid white; width: 120px; padding: 5px; text-align: center}
span#autor{font-size: 12px; color: white; text-shadow: 0px 0px 20px black;}