Eu fiz da seguinte forma no CSS:
.pessoa {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 0) { /*Será aplicado as seguintes modificações para as tela maiores que 0px:*/
.pessoa {
margin-bottom: 4rem; /*Para as telas maiores que 0 será aplicado na classe .pessoa uma margem para baixo de 4rem*/
}
.pessoa:last-child { /*Ao last child será aplicado o margin-botton 0rem na última classe de .pessoa*/
margin-bottom: 0;
}
}
@media screen and (min-width: 768px) { /*Será aplicado as seguintes modificações para as tela maiores que 768px*/
.pessoa {
margin-bottom: 0; /*Esse é formato padrão/original para as telas maiores de 768px*/
}
}
O que não entendi foi porque funcionou o last-child na classe .pessoa.
Eu acreditava que o last-child só podia ser usado na classe pai, no caso, classe .pessoas para poder estilizar o seu último filho da classe .pessoa.
Eu tentei usar lá, mas não funcionou. Eu creio que não funcionou porque a classe .pessoa sobrescrevia o que eu escrevia dentro do last-child na classe .pessoas.
Vejam o HTML:
<section class="quem-somos">
<h3 class="quem-somos__titulo">Quem somos</h3>
<p class="quem-somos__descricao">Conheça a comunidade por trás da iniciativa</p>
<div class="pessoas">
<div class="pessoa">
<div class="pessoa__imagem pessoa__imagem--roberta"></div>
<span class="pessoa__nome">Roberta</span>
<span class="pessoa__funcao">Conteúdo</span>
</div>
<div class="pessoa">
<div class="pessoa__imagem pessoa__imagem--marcela"></div>
<span class="pessoa__nome">Marcela</span>
<span class="pessoa__funcao">Chef de cozinha</span>
</div>
<div class="pessoa">
<div class="pessoa__imagem pessoa__imagem--andreia"></div>
<span class="pessoa__nome">Andréia</span>
<span class="pessoa__funcao">Pequena Produtora</span>
</div>
</div>
</section>
Desde já agradeço a atenção.
Sucesso na sua jornada!!