@media screen and (max-width: 1440px) {
  .blog-wrapper .topics-of-the-week {
    max-width: 1180px;
  }
  
  .blog-wrapper .all-articles-list button {
    font-size: 20px;
  }

  .bnote-wrapper .blog-article h3,
  .blog-wrapper .blog-article h3 {
    font-size: 21px;
  }
}

@media screen and (max-width: 900px) {
  .blog-wrapper .all-articles-list ul li{
    margin-right: 60px;
  }

  .bnote-wrapper .blog-article,
  .blog-wrapper .blog-article{
    max-width: 700px;
    margin: 30px auto;
    width: 100%;
  }

  .blog-article .blog-article .content,
  .blog-wrapper .blog-article .content,
  .blog-article .blog-article h3,
  .blog-wrapper .blog-article h3,
  .blog-article .blog-article .content > p,
  .blog-wrapper .blog-article .content > p {
    margin-top: 20px;
  }

  .blog-wrapper .all-articles-list ul {
    padding-bottom: 30px;
  }
}

@media screen and (max-width: 880px) {
  .blog-wrapper .banner .content {
    min-height: 200px;
  }
}

@media screen and (max-width: 760px) {
  .bnote-wrapper .blog-article h3,
  .blog-wrapper .blog-article h3 {
    font-size: 20px;
  }

  .bnote-wrapper .blog-article .content p,
  .blog-wrapper .blog-article .content p {
    font-size: 15px;
  }

  .blog-wrapper .topics-of-the-week{
    padding: 40px 20px;
  }

  .bnote-wrapper .blog-article a.btn-medium, 
  .blog-wrapper .blog-article a.btn-medium {
    height: 50px;
    width: max-content;
  }

  .bnote-wrapper .blog-article button img,
  .blog-wrapper .totw-content button img{
    max-width: 30px;
  }

  .blog-wrapper .totw-header h2 {
    margin-right: 15px;
  } 

  .blog-wrapper .all-articles h3 {
    max-width: 160px;
    text-align: right;
  }

  .blog-wrapper .all-articles-list {
    padding-bottom: 30px;
    right: 0;
    min-width: 300px;
  }

  .blog-wrapper .all-articles-list .articles-list-header {
    padding: 20px;
  }

  .blog-wrapper .articles-list-header h2 {
    font-size: 20px;
  }

  .blog-wrapper .all-articles-list h5{
    padding: 20px;
    padding-bottom: 10px;
  }

  .blog-wrapper .all-articles-list ul{
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .blog-wrapper .all-articles-list ul li{
    margin-right: 20px;
    margin-top: 15px;
  }

  .blog-wrapper .all-articles-list ul li a{
    font-size: 14px;
  }

  .blog-wrapper .all-articles-list button {
    font-size: 18px;
  }

  .blog-wrapper .totw-header .see-all ul {
    right: 0;
  }
  
  .blog-wrapper .totw-navigation {
    margin-top: 10px;
  }

  .blog-wrapper .totw-navigation nav {
    margin: auto 20px;
  }  

  .blog-wrapper .totw-nav-control-prev img,
  .blog-wrapper .totw-nav-control-next img {
    width: 42px;
  }
}

@media screen and (max-width: 480px) {
  .blog-wrapper .blog-article .content p.art-date {
    font-size: 13px;
  }
  
  .bnote-wrapper .blog-article h3,
  .blog-wrapper .blog-article h3 {
    font-size: 18px;
  }

  .bnote-wrapper .blog-article .content p,
  .blog-wrapper .blog-article .content p {
    font-size: 14px;
    line-height: 22px;
  }

  .blog-wrapper .topics-of-the-week{
    padding: 40px 20px;
  }

  .blog-wrapper .totw-header .see-all {
    width: 145px;
  }
  
  .blog-wrapper .all-articles-list {
    min-width: calc(100vw - 53px);
  }
  
  .blog-wrapper .all-articles-list ul li{
    margin-right: auto;
  }

  .blog-wrapper .all-articles-list ul li a{
    font-size: 14px;
  }

  .blog-wrapper .all-articles-list button {
    font-size: 17px;
  }

  .blog-wrapper .totw-header .see-all {
    width: 115px;
  }

  .blog-wrapper .blog-article {
    max-width: 480px;
    margin: 25px 0;
    width: 100%;
  }

  .blog-wrapper .blog-article .content,
  .blog-wrapper .blog-article h3,
  .blog-wrapper .blog-article .content > p {
    margin-top: 10px;
  }

  .blog-wrapper .totw-content button img{
    max-width: 26px;
  }
}