﻿
.writers-listing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  width:100%;
  margin-top:40px
}

.writers-listing .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.writers-listing .ttl h2 {
    background: unset;
    font-size: 17px;
    padding: 0 0 4px 0;
    color: #000;
}
.writers-listing .writers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 30px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.writers-listing .article {
  display: flex;
  flex-direction: column;
  width: 141px;
  align-items: center;
  gap: 16px;
  position: relative;
  margin-left:0
}
.writers-listing .article:hover .authorName
{
    color:#E03322
}

.writers-listing .authorImg{
    display:flex;
   width: 140px;
  height:140px;
    border-radius:50%;
  overflow:hidden;
  justify-content:center;
  align-items:center
}
.writers-listing .image {
  width: auto;
  height:100%;

}

.writers-listing .authorName {
  position: relative;
  align-self: stretch;
  height: auto;
  font-family: DroidKufiBold, Arial;
  color: #111111;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  transition:ease-in-out all .2s;
}
.writers-listing .authorName:before{display:none}

.writers-listing .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 1;
}

.moreButton{display:inline-block;width:200px;height:46px;line-height:46px;color:#fff;background:#E03322;text-align:center;margin-top:0;font-size:15px;}

@media screen and (min-width:1024px) and (max-width:1919px) {
    .writers-listing .article{    width: 111px;}
    .writers-listing .authorImg{width: 111px;height:111px}
    .writers-listing .authorName{font-size:12px}
     .moreButton{   width: 180px;
    height: 44px;
    line-height: 44px;}
}



@media screen and (min-width:320px) and (max-width:767px) {

.moreButton{width:100%}

.writers-listing{gap:16px;margin-bottom:30px}
.writers-listing .writers{gap:24px 10px;}
.writers-listing .article{width:106px;gap:10px}
.writers-listing .authorImg{width:106px;height:106px}
.writers-listing .authorName{font-size:12px}

.articleDiv .writers-listing,
.articleDiv .thanwyaWidget{padding:0 10px}

}