@media screen and (max-width: 1280px) {
 .container {
  width: 90%;
 }
 .mini-container {
  width: 90%;
 }
 .content-article .article-content-sec .content {
  margin-top: 3.5rem;
 }
}

@media screen and (max-width: 1180px) {
 html {
  font-size: 15px;
 }
}
@media screen and (max-width: 1080px) {
 html {
  font-size: 14px;
 }
}

@media screen and (max-width: 980px) {
 html {
  font-size: 14px;
 }
 .content-article .article-content-sec .content {
  margin-top: 4rem;
 }
}

@media screen and (max-width: 860px) {
 html {
  font-size: 13px;
 }
 .latest-news .grid {
  display: flex;
  flex-direction: column;
  height: 60vh;
  flex-wrap: wrap;
  width: 100%;
  overflow-x: scroll;
 }
 .latest-news article {
  width: 300px;
 }
 .content-article .article-content-sec .content {
  margin-top: 2rem;
 }
}

@media screen and (max-width: 720px) {
 html {
  font-size: 16px;
 }
 .hero .hero-bg {
  grid-template-columns: repeat(1, 1fr);
 }
 .hero .hero-bg .content {
  /* width: 65%; */
  line-height: 1.5;
 }
 .latest-news .grid {
  /* height: 70vh; */
 }
 .hero .hero-bg .content h2 {
  font-size: 2.2rem;
 }
 .hero .hero-bg .content {
  padding-bottom: 0.7rem;
 }
 .popular-articles .popular-content .multi-articles article h6 {
  font-size: 1.5rem;
 }
 .popular-articles .popular-content .content h5 {
  font-size: 1.5rem;
 }
 .popular-articles .popular-content .content p {
  font-size: 1.1rem;
 }
}

@media screen and (max-width: 640px) {
 .header .header-nav {
  /* width: 100%; */
  border-radius: 0;
 }
 .hero .hero-bg {
  height: 40vh;
 }
 .search-sec form {
  width: 80%;
 }
 .latest-news .latest-content {
  margin-top: 4rem;
  /* margin-bottom: 4rem; */
 }
 .popular-content .content h5 {
  font-size: 1.4rem !important;
 }
 .popular-content .content p {
  font-size: 1.2rem;
 }
 .content-article {
  height: 70vh;
  margin-top: 2rem;
 }
 .content-article-left {
  height: 60vh;
 }
 .content-article .article-content-sec {
  grid-template-columns: repeat(1, 1fr);
 }
 .content-article .article-content-sec figure {
  height: 40vh;
 }
 .content-article .article-content-sec .content {
  position: static;
  width: 80%;
  margin: auto;
  margin-top: -10rem;
  height: fit-content;
 }

 .content-article-left .article-content-sec {
  grid-template-columns: repeat(1, 2fr);
 }
 .content-article-left .article-content-sec .content {
  position: static;
  height: fit-content;
  z-index: 999;
  /* margin-right: 4rem; */
  grid-row: 2;
 }
 .content-article-left .article-content-sec figure {
  grid-column: 1/2;
  grid-row: 1;
  height: 40vh;
 }

 .popular-articles .popular-content {
  grid-template-columns: repeat(1, 2fr);
 }
 .popular-articles .popular-content article {
  grid-column: 1/2;
  grid-row: 1;
 }
 .popular-articles .popular-content .multi-articles {
  grid-column: 1/2;
 }
 .popular-articles .popular-content .multi-articles article {
  margin-bottom: 2rem;
 }
 .popular-articles .popular-content article figure {
  height: 30rem;
 }

 .about-sec .content p {
  width: 80%;
 }
 .flexColumn640 {
  flex-direction: column;
 }
 .footer .all-content .flex40 {
  flex: 0 1 100%;
 }
 .footer .all-content .flex60 {
  flex: 0 1 100%;
 }
 .footer .right {
  margin-top: 1rem;
 }
 .footer .right li {
  margin: 1rem;
 }

 .latest-news {
  margin-top: 28rem;
 }

 .popular-articles .popular-content .multi-articles article h6 {
  font-size: 2rem;
 }
 .popular-articles .popular-content .multi-articles article p {
  height: 4.6rem;
  overflow-y: hidden;
 }
 .hero .hero-bg .left {
  height: 50vh;
 }
}

@media screen and (max-width: 550px) {
 .hero .hero-bg {
  height: 40vh;
 }
 .hero .hero-bg .content h2 {
  font-size: 2rem;
 }
 .hero .hero-bg .content .inside-content p {
  font-size: 1rem;
  margin-top: 1rem;
 }
 .hero .hero-bg .content .inside-content a {
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  margin-top: 1rem;
  display: block;
  width: fit-content;
 }
 .popular-articles .popular-content .multi-articles article h6 {
  font-size: 1.7rem;
 }
 .hero .hero-bg .content h2 {
  font-weight: lighter;
 }
 .footer ul li {
  text-align: left;
  width: fit-content;
  margin-bottom: 0.5rem;
 }
 .footer ul {
  width: 60%;
  /* justify-content: space-around; */
 }
 .latest-news .grid {
  height: 70vh;
 }
}

@media screen and (max-width: 450px) {
 .latest-content {
  /* height: 60vh !important; */
 }
 .content-article .article-content-sec .content {
  width: 70%;
 }
}

@media screen and (max-width: 480px) {
 .footer ul {
  flex-wrap: wrap;
 }
 .footer ul li {
  /* margin: 0.8rem; */
  width: 40%;
  text-wrap: nowrap;
 }
 .popular-articles .popular-content .multi-articles article h6 {
  font-size: 1.5rem;
 }
 .about-sec .content p {
  width: 95%;
 }
}

@media screen and (max-width: 395px) {
 .latest-news .grid {
  height: 65vh;
 }
}