.writer-articles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px 0;
  position: relative;
      width: 100%;
      padding-top:16px
}

.writer-articles .article {
  display: flex;
  width: 50%;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 0 0 16px;
  position: relative;

}

.writer-articles .article:nth-of-type(2n){padding:0}

.writer-articles .frame {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding:20px 12px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
    background-color: #ffffff;
  border: 1px solid;
  border-color: #e8e8e8;
}

.writer-articles .div-wrapper {
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
      overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.writer-articles .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: DroidKufiBold, Arial;
  color: #111111;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
  transition:ease-in-out all .2s;
  text-align: right;

}
.writer-articles .article:hover .text-wrapper
{
color:#E03322;
}

.writer-articles .div {
  position: relative;
  align-self: stretch;
  height: 52px;
  font-family: DroidKufiLight, Arial;
  font-weight: 400;
  color: #666666;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: rtl;
}

.writer-articles .moreButton{
    margin: 24px auto 0
}


@media screen and (min-width:768px) and (max-width:1279px) {

        .writer-articles .article{width:100%;padding:0}

}

@media screen and (min-width:320px) and (max-width:767px) {
    .writer-articles{gap:10px 0;        margin-bottom: 30px;}
        .writer-articles .article{width:100%;padding:0}
        .writer-articles .text-wrapper{font-size:15px}
        .writer-articles .moreButton{margin:10px auto 0}
        .writers-listing{margin-top:30px}

}