.articles-container {
  max-width: 700px;
  margin: auto;
  background: #F5F5F5 ;
  border-radius: 20px;
  padding: 15px;
}

/* each article row */
.article-card {
  display: flex;
  flex-direction: row-reverse;  
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #eee;
  padding: 16px 0;
}

.article-card:last-child {
  border-bottom: none;
}

/* text area */
.article-content {
  flex: 1;
  margin-right: 20px;  
}

.article-date {
  color: #00a07d;
  font-size: 14px;
  margin: 0 0 8px;
}

.article-title {
  font-size: 14px;
  color: #222;
  margin: 0 0 6px;
  font-weight: 500;
}

.article-desc {
  font-size: 14px;
  color: #777;
  margin: 0;
}

/* image box */
.article-image {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
/**/
.bg-light-gray{
    background-color: #F5F5F5;
    padding: 15px;
    border-radius: 10px;
}
.text-bg-1{
    background-color: #E6FFC8;
    padding: 5px;
}
.text-bg-2{
    background-color: #EEEEEE ;
    padding: 5px;
}
.text-bg-3{
    background-color:#DFD7FF ;
    padding: 5px;
}
.text-bg-4{
    background-color: #DFFFD7 ;
    padding: 5px;
}
.text-bg-5{
    background-color:#FFD7E3;
    padding: 5px;
}
.text-bg-6{
    background-color:  #D7FFF3;
    padding: 5px;
}
.text-bg-7{
    background-color: #D7DCFF  ;
    padding: 5px;
}
/**/


.btn.btn-share{
  background-color: #F5F5F5 !important;
  color: #07706D;
}
.btn.btn-share:hover{
  background-color: #07706D !important;
  color: #F5F5F5 !important;
}
.article-card .article-title:hover{
  color: #07706D!important;
  cursor: pointer;
}