@charset "UTF-8";

.new_reviews {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 20px;
    height: 400px;
    overflow-y: scroll;
}

.new_review {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
    padding: 16px;
    border-bottom: 2px solid #f1f1f1;
}

.new_review:last-of-type {
    border-bottom: none;
}

.new_review > .new_review_thum {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: baseline;
    width: 20%;
}

.new_review > .new_review_thum > img {
    width: 100%;
   object-fit: contain;
   object-position: center;
   aspect-ratio: 1/1;
   background: #ccc;
   /* border-radius: 50%; */
}


.new_review > dl {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(80% - 16px);
    margin: 0 0 0 16px;
}

.new_review > dl > dt {
    color: #888;
    font-weight: bold;
    font-size: 0.8rem;
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

.new_review > dl > dt::before {
    content: "@";
    color: #888;
    font-weight: bold;
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: fit-content;
    position: relative;
    left: 0;
    top: 0;
    margin: 0 0 0 0;
}

.new_review > dl > dd {
    font-weight: normal;
    font-size: 0.9rem;
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}


@media screen and (min-width: 1025px)
{
    .new_reviews {
        width: 50%;
        margin-left: auto;
    }
}