.article-list {
	max-width: 74.125rem;
	margin-right: auto;
	margin-left: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.article-list__item {
	/* em FLEX, os elementos filhos tem um tamanho inicial e podem encolher ou esticar para se ajustar ao pai. Por padrão, eles encolhem, mas não esticam. */
	display: flex;
	/* avisar o navegador que os elementos podem cair de linha se não houver espaço */
	flex-wrap: wrap;
	/* propriedade quase-nova para espaçar os elementos dentro do flex. */
	gap: 1.5rem;
	/* como os elementos são alinhados no sentido do flex. Por padrão, o sentido é horizontal, ou `row` */
	justify-content: center;

	/* para separar um item do outro */
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.article-list__item > * {
	/* só para ver melhor */
	outline: 0;
}

.article-list__article-thumb {
	/* para evitar que as imagens vazem, no caso do espaço disponível ser menor do que sua largura */
	max-width: 100%;
	height: auto;

	/* para evitar que as imagens percam a proporção e se estiquem verticalmente */
	align-self: flex-start;
	/* O padrão de flex-shrink já é 1. Então, essa propriedade está aqui só para documentá-la */
	flex-shrink: 1;
}

.article-list__article-header {
	/* definir o tamanho inicial, antes do ajuste. O navegador distribui tudo como se o elemento tivesse 20em e depois encolhe ou estica para ajustar. Se o espaço disponível for menor do que a largura da imagem, 300px, mais 20em, o elemento cai e estica. */
	flex-basis: 20em;
	/* avisar o fator de ajuste positivo para o navegador. O valor padrão é 0, ou seja, não estica */
	flex-grow: 1;
	/* O padrão de flex-shrink já é 1. Então, essa propriedade está aqui só para documentá-la */
	flex-shrink: 1;
}

.excerpt {
    color: #7a7a7a;
    font-size: 1em;
    line-height: 1.5em;
}
.readmore{
    background: #680000;
    border-radius: 50px;
    padding: 4px 15px;
    border: 0;
    color: #fff;
}
.readmore:hover{
    background: #990000;
}