@media screen and (max-width: 580px) {
 .container,
 .mini-container {
  width: 90%;
 }

 .flex-column580 {
  flex-direction: column;
 }
 .flex-reverse-column580 {
  flex-direction: column-reverse;
 }
 .header {
  figure {
   width: 55%;
   margin: auto;
  }
 }

 .hero-sec {
  h1 {
   font-size: 1.9rem !important;
  }
  p {
     font-size: 1.1rem !important;
     margin: 0.5rem 0 !important;
 }
  article {
   grid-template-columns: repeat(1, 1fr);
   grid-template-rows: repeat(1, 1fr);
   .left {
    grid-row: 2/3 !important;
   }
   .right {
    grid-row: 1/2 !important;
    .first-figure {
     width: 280px !important;
    }
    .second-figure {
     width: 180px !important;
     margin-left: -7rem !important;
    }
   }
  }
 }

 .aritlces-list .articles {
  article {
   h5 {
    font-size: 1.5rem !important;
   } 
   p {
    font-size: 1.1rem !important;
   }
   figure {
    height: 30vh !important;
   }
  }
 }

 .trending-articles {
  .articles {
   grid-template-columns: repeat(1, 1fr);
  }
 }

 .single-article {
  article {
   grid-template-columns: repeat(1, 1fr);
   .content {
    width: 100%;
    padding-left: 0;
    margin-top: 1rem;
    p {
     font-size: 1.1rem !important;
    }
   }
  }
  .title {
   font-size: 2rem !important;
  }
 }

 .popular-articles {
  overflow-x: scroll;
  .articles {
   width: 99%;
   grid-template-columns: repeat(4, 1fr);
   article {
    width: 300px;
   }
  }
 }

 .multi-articles {
  .list-articles {
   grid-template-columns: repeat(1, 1fr);
   grid-template-rows: repeat(1, 1fr);
   .left {
    article {
     margin-bottom: 2rem;
     align-items: start;
     p {
      font-size: 1rem !important;
     }
    }
   }
  }
 }
 .multi-articles .list-articles article:nth-child(1) {
  grid-row: 2/3 !important;
 }
 .multi-articles .list-articles article:nth-child(2) {
  grid-row: 1/2 !important;
 }

 /* footer */

 .footer-form {
  width: 80%;
 }
 .about-sec .content p {
  width: 100%;
 }

 .footer {
  ul {
   flex-wrap: wrap;
   li {
    width: 47%;
    margin: 0.3rem;
   }
  }
 }
 .article-page-inside .article-left .heading {
        font-size: 2.5rem !important;
        line-height: 30px !important;
        font-weight: 600 !important;
    }
    .article-left .content p{
        font-size : 1.8rem !important;
        margin: .5rem 0;
    }
    .article-page-inside .article-left h2 {
        font-size: 2rem !important;
        margin: 1.5rem 0;
    }
    .article-page-inside .article-left h3 {
        font-size: 2rem !important;
    }

    .article-page-inside .article-left ul li{
        font-size: 2rem !important;
    }

    .article-page-inside .article-left table{
        border: 1px solid gray;
        margin: 1rem 0;
        width: 100%;
        tr{
            
            border: 1px solid gray;
        }
        td{
            border: 1px solid gray;
            font-size: 1rem;
        }
    }
}