.topic-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
}

.text-small-muted {
    font-size: 0.50rem;
    color: #6c757d;
    text-align: left; /* Wyrównaj tekst do lewej */
    width: 100%;
    margin-bottom: 10px;
}

.card-body-container {
    display: flex;
    justify-content: space-between;
}

.card-body {
    flex: 1;
    padding-right: 20px; /* Odstęp między treścią a obrazkiem */
}

.card-body h5,
.card-body p,
.card-body .card-meta,
.card-body * {
    margin: 0; /* Wyzerowanie wszystkich marginesów */
    padding: 0; /* Wyzerowanie wszystkich paddingów */
}

.topic-card img {
    max-width: 100px; /* Upewnij się, że obrazek ma stały rozmiar */
    height: auto;
    align-self: flex-start; /* Wyrównanie obrazu do góry */
    margin-top: 0; /* Usunięcie domyślnego marginesu górnego */
    margin-left: auto; /* Wyrównanie obrazka do prawej strony */
}

/* Nowe style dla komentarzy */
.comment {
    border: 1px solid #e0e0e0; /* Łagodny border */
    padding: 10px;
    border-radius: 5px; /* Opcjonalnie, zaokrąglone rogi */
    margin-top: 20px; /* Większy odstęp między komentarzami od góry */
}

.comment .comment-id {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: right;
}

.comment img {
    margin-right: 10px; /* Dodanie odstępu między awatarem a treścią */
}

.comment .col-md-11 {
    padding-left: 0; /* Wyzerowanie lewego paddingu */
    margin-left: -20px; /* Dodanie ujemnego marginesu aby bardziej przesunąć w lewo */
}