Comentários está sem posicionamento (código)

style.scss:

/// Estas variáveis se referem as cores principais do nosso blog
$purple: #a050be;
$light-grey: #eaeaeb;
$dark-grey: #464646;
$yellow: #fabe50;

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;

    &__content {
        width: 70%;
        padding: 40px 8px;
    }

    &__post {
        text-align: center;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    &__title {
        text-decoration: none;
        font-size: 22px;
        color: $dark-grey;
        letter-spacing: 1.5;
        &:hover {
            color: $purple;
        }
    }

    &__subtitle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    &__date {
        margin: 0 10px;
        font-size: 12px;
        font-style: italic;
    }

    &__tag {
        font-size: 14px;
        padding: 5px 7px;
        color: $purple;
        border: 1px solid $purple;
        margin: 0 10px;
    }

    &__details {
        border: 1px solid $light-grey;
    }

    &__img {
        width: 100%;
    }

    &__description {
        padding: 40px 0 25px;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
    }

    &__btn {
        text-decoration: none;
        font-size: 16px;
        letter-spacing: 1.5;
        color: $purple;
        background-color: $yellow;
        padding: 10px 20px;
        transition: .3s;
        &:hover {
            color: $yellow;
            background-color: $purple;
        }
    }

    &__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid $light-grey;
        margin-top: 30px;
    }

    &__author {
        width: 50%;
        border-right: 1px solid $light-grey;
    }

    &__p {
        font-size: 14px;
        color: $dark-grey;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    &__comments {
        width: 50px;
    }

    &__a {
        text-decoration: none;
        font-size: 14px;
        color: $dark-grey;
        margin-top: 10px;
        margin-bottom: 10px;
        &:hover {
            color: $purple;
        }
    }
}

/* Este trecho de estilo se refere
ao rodapé do nosso blog */
.footer {
    text-align: center;
    padding: 20px 0;
    font-family: Arial, Helvetica, sans-serif;
    // Este trecho de estilo posiciona o footer na parte de baixo da nossa tela
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    &__logo {
        max-width: 100px;
    }

    &__txt {
        margin: auto;
        font-size: 14px;
    }
}

index.html:

<main class="main">
        <div class="main__content">
            <article class="main__post">
                <a href="#" class="main__title">Cuidado com os animais durante a pandemia</a>
                <div class="main__subtitle">
                    <p class="main__date">20/08/2020</p>
                    <span class="main__tag">Cães</span>
                </div>
                <div class="main__details">
                    <img src="assets/img/dog.jpg" alt="Cachorro" class="main__img" />
                    <p class="main__description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                    <a href="#" class="main__btn">Ler mais</a>
                    <div class="main__info">
                        <div class="main__author">
                            <p class="main__p">by Alura</p>
                        </div>
                        <div class="main__comments">
                            <a href="#" class="main__a">2 comentários</a>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </main>