Problemas com a responsividade | Front-end | Alura

Bom dia, pessoal! Estou com problemas no meu código em questão da responsividade. Quando tento fazer com que os cards da section fiquem um ao lado do outro no min-width, eles não estão se comportando da forma esperada, nao estou conseguindo com que fique apenas dois cards por linha, abaixo deixo meu codigo, obrigado!


    <h2 class="consultas-dia__data">Hoje</h2>

    <div class="consultas">

        <section class="consultas-dia">
            <div class="consultas-dia__paciente">
                <img src="./images/perfil-1.svg" alt="Paciente Luciana Dias" class="consultas-dia__perfil-paciente">
                <div class="consultas-dia__infos-pacientes">
                    <p class="consultas-dia__nome-pacientes">Luciana Dias</p>
                    <div class="consultas-dia__consulta">
                        <img src="./images/Camera.svg" alt="Câmera" class="consultas-dia__camera">
                        <p class="consultas-dia__infos-consulta">Consulta remota</p>
                    </div>
                </div>
                <div class="consultas-dia__chat">
                    <a href="#"><img src="./images/Chatcirculo1.svg" alt="chat para conversar com paciente"></a>
                </div>
            </div>

            <hr class="linha-horizontal">
            <p class="consultas-dia__horario">14:00 - 15:00 (1 hora)</p>
            <div class="consultas-dia__opcoes">
                <a href="#" class="consultas-dia__ligar-video">Ligar por vídeo</a>
                <a href="#" class="consultas-dia__ligar-audio">Ligar por áudio</a>
            </div>
        </section>

        <section class="consultas-dia">
            <div class="consultas-dia__paciente">
                <img src="./images/perfil-2.svg" alt="Paciente Luciana Dias" class="consultas-dia__perfil-paciente">
                <div class="consultas-dia__infos-pacientes">
                    <p class="consultas-dia__nome-pacientes">Larissa Santana</p>
                    <div class="consultas-dia__consulta">
                        <img src="./images/pin.svg" alt="Pin de endereço" class="consulta-dia__presencial">
                        <p class="consultas-dia__infos-consulta">Consulta no local</p>
                    </div>
                </div>
                <div class="consulta-dia__chat">
                    <a href="#"><img src="./images/Chatcirculo1.svg" alt="chat para conversar com paciente"></a>
                </div>
            </div>

            <hr class="linha-horizontal">
            <p class="consultas-dia__horario">16:00 - 17:00 (1 hora)</p>
            <div class="consultas-dia__opcoes consultas-dia__opcoes__presencial ">
                <a href="#" class="consultas-dia__endereco">Ver endereço</a>
            </div>
        </section>

        <section class="consultas-dia">
            <div class="consultas-dia__paciente">
                <img src="./images/perfil-4.svg" alt="Paciente Luciana Dias" class="consultas-dia__perfil-paciente">
                <div class="consultas-dia__infos-pacientes">
                    <p class="consultas-dia__nome-pacientes">Marcos Correia</p>
                    <div class="consultas-dia__consulta">
                        <img src="./images/Camera.svg" alt="Câmera" class="consultas-dia__camera">
                        <p class="consultas-dia__infos-consulta">Consulta remota</p>
                    </div>
                </div>
                <div class="consultas-dia__chat">
                    <a href="#"><img src="./images/Chatcirculo1.svg" alt="chat para conversar com paciente"></a>
                </div>
            </div>

            <hr class="linha-horizontal">
            <p class="consultas-dia__horario">17:20 - 18:00 (40 minutos)</p>
            <div class="consultas-dia__opcoes">
                <a href="#" class="consultas-dia__ligar-video">Ligar por vídeo</a>
                <a href="#" class="consultas-dia__ligar-audio">Ligar por áudio</a>
            </div>
        </section>

    </div>


@media screen and (min-width: 1024px){

    .status-bar {
        display: none;
    }

    .perfil-doutor {
        margin-top: 2em;
    }

    .consultas {
        display: flex;
        gap: 1.5em;
    }

}

Oi, Fabio, tudo bem?

Para garantir que os cards fiquem lado a lado e que apenas dois cards apareçam por linha em telas maiores, podemos ajustar um pouco o seu CSS. Vou sugerir algumas alterações para você:

Defina a largura dos cards: para garantir que apenas dois cards apareçam por linha, você pode definir uma largura específica para cada card.
Ajuste o flex-wrap: use a propriedade flex-wrap para permitir que os cards quebrem para a próxima linha quando necessário.

Aqui está um exemplo de como você pode ajustar o seu CSS:

@media screen and (min-width: 1024px) {
    .status-bar {
        display: none;
    }

    .perfil-doutor {
        margin-top: 2em;
    }

    .consultas {
        display: flex;
        flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
        gap: 1.5em;
    }

    .consultas-dia {
        flex: 1 1 calc(50% - 1.5em); /* Define a largura dos cards para ocupar metade da linha, menos o gap */
        box-sizing: border-box; /* Garante que o padding e border sejam incluídos na largura total */
    }
}

Com essas alterações, cada card (.consultas-dia) ocupará 50% da largura da linha (menos o gap), garantindo que apenas dois cards sejam exibidos por linha em telas maiores.

Caso ainda tenha problemas, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva. Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Espero que dê tudo certo. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!