body, ul, li, p {
    margin: 0px;
    padding: 0px;
    list-style: none;   
    font-size: 1.2rem; 
    font-family: Arial;
}

a {
    text-decoration: none;
    color: white;
}

h1 {
    text-align: center;
    margin-top: 50px; 
}

img {
    max-width: 100%;/*responsividade, as imagens se expandem até o tamnho máximo delas*/
    display: block;
}

.header {
    background-color: black;
    display: flex;/*coloca logo e nav lado a lado*/
    justify-content: space-between;/*coloca logo e nav em extremidades opostas*/
    flex-wrap: wrap;/*nas telas bem pequenas o nav vai para baixo da logo*/
    padding: 20px;
    align-items: center;
}

.menu {
    display: flex;/*coloca os ítens do nav lado a lado*/
}

.menu li {
    margin-left: 10px;
}

.menu li a {
    display: block;/*??*/
    padding: 10px;
    border: 0.1px solid  white;
}

/*CSS Flexbox 1*/
.flex {
    display: flex;
    flex-wrap: wrap;/*conforme o tamanho da tela vai dividir as div em linhas - Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.*/
    max-width: 800px;/*largura máxima do container*/
    margin: 0 auto; /*passando dos 800px, alinha ao centro com margem 0*/
}

.flex > div {
    flex: 1 1 200px;/*flex-grow, flex-shrink, flex-basis*/
    margin: 10px;
}

/*CSS Grid1*/
.grid1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;/*Especificar quantidade de colunas na largura total 100%/3, neste cado (1fr = uma unidade fracional) = repeat(3, 1fr);*/
    max-width: 800px;
    margin: 0 auto;
    gap: 20px; /*grid-gap is deprecated*/
    padding: 0px 10px;
}

.grid1 > div:nth-child(n + 4) {/*aplicar a partir do 4º ítem*/
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*coloca a unidade fracional legenda ao lado da unidade fracional imagem*/
    gap: 10px; /*funciona como margin*/
    align-items: center;/*alinha verticalmente a legenda*/
}

.grid1 > div.anuncio {
    grid-column: 1;/*Posiciona na primeira coluna*/
    grid-row: 2/5;/*Posiciona o elemento a partir da linha 2 (legenda) até a 5 (como uma mesclagem de linhas no excel)*/
    border: 2px solid tomato;
    display: block;
}

@media screen and (max-width: 600px) {
    .grid1 {
        grid-template-columns: repeat(2, 1fr)
    }
    .grid1 > div:nth-child(n + 4) {
        display: block;
    }
    .grid1 > div.anuncio {/*assim o anúncio vai ocupar apenas uma linha e não 3*/
        grid-column: auto;
        grid-row: auto;
        order: -1;/*inverte a posição do anuncio,no DOM continua a originária*/
}
}

/*CSS Grid 2*/
.grid2 {
    display: grid;
    grid-template-columns: 1fr 200px;/*não vai diminuir menos*/
    gap: 20px;
    max-width: 800px;
    padding: 10px;
    margin: 0 auto;
}

.sidebar > div {
    margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
    .grid2 {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: flex;
        overflow: scroll;
    }
    .sidebar > div {
        flex: 1 0 200px;
        margin: 0 5px;
    }
}

/*CSS Grid 3*/

.grid3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 800px;
    max-height: 1000px;
    padding: 10px;
}
.grid3-item:nth-child(1) {
    grid-row: 1 / 3; /*o elemento 1 vai ocupar 3 linhas*/    
}

/*Resolvendo a legenda*/
.grid3-item {
    display: grid; /*afasta um pouco a legenda da imagem*/
}
.grid3-item img {
    grid-column: 1;
    grid-row: 1/3;
    align-self:end;/*alinha a imagem à legenda*/
}

.grid3-item p {
    background-color: rgba(0, 0, 0, 0.349);
    padding: 10px;
    color: white;
    grid-column: 1;
    grid-row: 2;
    align-self: end;/*coloca a legenda certinho no pé da imagem*/
}

footer p {
    background-color: black;
    color: rgb(180, 178, 178);
    text-align: center;
    text-decoration: none;
    padding: 15px;
    font-size: 12px;
}
footer a {
    color: rgb(180, 178, 178);
}
footer a:hover {
    text-decoration: underline;
}