Meu código HTML está igual ao da professora Juliana! (eu acho rs)
Porém, meu grid sempre se mantém em duas colunas com o primeiro article (as receitas) se posicionando totalmente na primeira coluna e o restante na segunda.
Alguém sabe me dizer onde eu estou errando?
<section class="container" id='receitas'>
<div class="row">
<article class="card borda-cor-especial card-largura col-12 col-md-2">
<img src="src/img/receita-abacate.jpg" class="card-img-top card-posicao-imagem"
alt="tigela de abacate com outra fruta roxa e aveias, vista superior">
<div class="card-body">
<h5 class="card-title">Tigela de abacate</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura col-12 col-md-2">
<img src="src/img/receita-kiwi.jpg" class="card-img-top card-posicao-imagem"
alt="tigela de mingau com kiwi, vista superior">
<div class="card-body">
<h5 class="card-title">Salada de kiwi</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
<article>
<article class="card borda-cor-especial card-largura col-12 col-md-2">
<img src="src/img/receita-mix.jpg" class="card-img-top card-posicao-imagem"
alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
<div class="card-body">
<h5 class="card-title">Mix de vegetais</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura col-12 col-md-2">
<img src="src/img/receita-pimentoes.jpg" class="card-img-top card-posicao-imagem"
alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
<div class="card-body">
<h5 class="card-title">Pimentões à Juliana</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura col-12 col-md-2">
<img src="src/img/receita-oriental.jpg" class="card-img-top card-posicao-imagem"
alt="tigela com salada de vegetais estilo oriental, vista de cima">
<div class="card-body">
<h5 class="card-title">Prato oriental</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura col-12 col-md-2">
<img src="src/img/receita-beterrabas.jpg" class="card-img-top card-posicao-imagem"
alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
<div class="card-body">
<h5 class="card-title">Beterrabas assadas</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
</div>
</section>CSS:
.card-largura { width: 18rem; }
.imagem-carrosel-um { object-fit: cover; object-position: 0 80%; height: 400px; }
.imagem-carrosel-dois { object-fit: cover; /* object-position: 0 80%; */ height: 400px;}
.fonte-titulo { font-family: 'Pacifico', cursive;}
.cor-especial { color: darkred;}
.botao-cor-especial { background-color: darkred; color: #fff;}
.borda-cor-especial { border-color: darkred;}
.card-posicao-imagem { object-fit: cover; /* object-position: 0 80%; */ height: 200px; }