.hb_articlelist_wrapper {
    padding: 32px;
    background-color: #F5F7F5;
    border-radius: 24px;
}

.hb_article-list_article:not(:last-child) {
    border-bottom: 1px solid #E1E6E1;
}
.hb_article-list_headline {
    font-family: "Playfair Display", serif;
    font-size: 24px;
    line-height: 36px;
    padding-bottom: 24px;
}
.hb_article-list_link {
    padding: 12px 0;
    display: flex;
    gap: 16px;
}
.hb_article-list_link:hover .hb_article-list_title {
    color: #7C897B;
}
.hb_article-list_link:hover .hb_article-list_icon {
    background-color: #7C897B;
}

.hb_article-list_icon {
    width: 28px;
    height: 28px;
    padding: 4px;
    background-color: #2F332E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s;
}

.hb_article-list_arrow {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-right-solid'%3E%3Cpath id='Vector' d='M11.6992 4.23828L10.8008 5.13672L15.0391 9.375H2.5V10.625H15.0391L10.8008 14.8633L11.6992 15.7617L17.0117 10.4492L17.4414 10L17.0117 9.55078L11.6992 4.23828Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hb_article-list_title {
    font-size: 20px;
    line-height: 32px;
    color: #1F221F;
    font-family: "Playfair Display", serif;
    transition: color .3s;
}

.hb_article-list_subtitle {
    font-size: 16px;
    line-height: 24px;
    color: #2F332E;
}