.popularPostList {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.popularPostList__item {
    position: relative;
    margin-bottom: 15px;
    padding: 15px;
    word-break: break-word;
    color: var(--gray);
    background-color: #fff;
    box-shadow: var(--boxShadow);
}

.popularPostList__item:hover {
    cursor: pointer;
}

.popularPostList h2 {
    color: var(--primary);
}

.popularPostList___time {
    color: var(--mediumGray);
}

.popularPostList__image,
.popularPostList__image img {
    width: 100%;
}

.popularPostList__intro {
    margin-bottom: 3rem;
}

.popularPostList__readMoreLink {
    position: absolute;
    inset: 0;
}

.popularPostList__readMoreText {
    position: absolute;
    inset: auto 1rem 1rem 1rem;
    display: block;
    margin: 0 -15px -15px;
    padding: 15px 0;
    border-top: 1px solid var(--lightGray);
    text-align: center;
    color: #fff;
    background: #b1b1b1;
    transition: all ease-in-out .25s;
}

.popularPostList__item:hover .popularPostList__readMoreText {
    text-decoration: none;
    cursor: pointer;
    color: #fff !important;
    background: var(--lightGreen);
    transition: all ease-in-out .25s;
}

.body.--pink .popularPostList__item:hover .popularPostList__readMoreText {
    background-color: var(--pink);
}

.body.--darkBlue .popularPostList__item:hover .popularPostList__readMoreText {
    background-color: var(--darkBlue);
}

.body.--green .popularPostList__item:hover .popularPostList__readMoreText {
    background-color: var(--lightGreen);
}

@media (min-width: 992px) {
    .popularPostList {
        display: flex;
        flex-wrap: wrap;
        column-gap: 30px;
    }

    .popularPostList__item {
        flex: 0 1 calc(33.333% - 20px);
        display: flex;
        flex-direction: column;
    }

    .popularPostList__intro {
        flex:1;
    }
}