Медиа-запросы не применяются для меньшей ширины

Question

медиазапросы внизу не относятся к размеру экрана. когда я изменяю размер браузера для меньшего размера, вместо медиа-запроса доступен оригинальный дизайн. когда я применяю большую ширину, она начинает работать для большей ширины. Я не могу понять, почему это происходит. это может быть проблема с рем. пожалуйста помоги! может быть, какая-то ссылка на статьи поможет.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-weight: 400;
  line-height: 1.6;
  background-color: #150721;
  font-size: 1.6rem;
  color: white;
  font-family: 'Lato', sans-serif;
}

.row {
  min-width: 114rem;
  margin: 0 auto;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

header {
  height: 10rem;
  margin-bottom: 5rem;
}

.logo {
  float: left;
  text-align: center;
  margin-top: 3.5rem;
  margin-left: 2rem;
}

.main-nav {
  float: right;
  margin-top: 3rem;
}

.main-nav ul li {
  display: inline;
  list-style: none;
  margin-left: 4rem;
  padding: 1rem 2rem;
  cursor: pointer;
  border-radius: 10px;
}

.main-nav ul li:hover {
  background-color: #9329a6;
}

.main-nav ul li a{
  text-decoration: none;
  text-transform: uppercase;
  font-size: 90%;
  color: white;
}

/* ************************************ */

.col-1-of-4 {
  width: calc((100% - 6rem) / 4);
  float: left;
  text-align: center;
  padding: 1rem;
}

.col-1-of-4:not(:last-child) {
  margin-right: 2rem;
}

.col-2-of-4 {
  width: calc(2 * ((100% - 6rem) / 4) + 2rem);
  float: left;
  padding: 1rem;
}

.col-2-of-4 .course-info {
  width: calc((100% - 2rem)  / 2);
  float: left;
  cursor: pointer;
  padding: 0.5rem;
  background-color: white;
  color: black;
  margin-bottom: 2rem;
}

.col-2-of-4 .course-info:nth-child(2n+0) {
  margin-right: 0;
}

.col-2-of-4 .course-info:nth-child(2n+1) {
  margin-right: 2rem;
}

.col-2-of-4 .course-info h2 {
  text-align: center;
}

.col-2-of-4 .course-info::after {
  content: "";
  display: table;
  clear: left;
}

.col-1-of-4 .contact-details {
  background-color: white;
  color: black;
  padding: 0.5rem;
  margin-top: 3rem;
}

.col-1-of-4 ul li {
  list-style: none;
  padding: 1rem;
  cursor: pointer;
  border: 1px solid yellow;
}

.col-1-of-4 ul li a {
  color: white;
  text-decoration: none;
}

#about_section {
  background-color: #eee;
  padding: 2rem;
  margin-top: 5rem;
  color: black;
  margin-bottom: 5rem;
}

.col-1-of-4__about {
  overflow: hidden;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0rem 0rem 0.2rem 0rem grey;
  background-color: white;
  overflow: hidden;
 }

.col-1-of-4__about:hover {
  box-shadow: 0rem 0rem 0.4rem 0.2rem grey;
  transition: box-shadow 0.5s;
}

.col-1-of-4__about img {
  overflow: hidden;
  padding: 2rem;
  transform: scale(1.15);
  transition: transform 0.5s;
}

.col-1-of-4__about img:hover {
  transform: scale(1);
}

.col-1-of-4 .heading {
  margin-bottom: 2rem;
}

.section-bottom p {
  text-align: left;
}

.copyright {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem 0;
  background-color: black;
  text-align: center;
}

@media all and (min-width: calc(40*10px)) and (max-width: calc(70*10px)) {
  html {
    font-size: 62.5%;
  }
  body {
    background-color: yellow;
    font-weight: bold;
    margin-left: 4rem;
    margin-right: 4rem;
    font-size: 1.6rem;
  }
  .col-1-of-4 {
    width: 100%;
  }
  .col-2-of-4 {
    width: 100%;
  }
   .col-2-of-4 .course-info {
      width: calc((100% - 4rem) / 2);
      margin: 0 1rem;
      margin-bottom: 2rem;
  }
  .col-2-of-4 .course-info:nth-child(2n+0) {
    margin-right: 0;
  }
  .col-2-of-4 .course-info:nth-child(2n+1) {
    margin-right: 2rem;
  }
  .col-1-of-4 .contact-details {
    width: calc((100% - 4rem) / 2);
    margin: 0 1rem;
    margin-bottom: 2rem;
    float: left;
  }
  .col-1-of-4 .contact-details:nth-child(2n+0) {
    margin-right: 0;
  }
  .col-1-of-4 .contact-details:nth-child(2n+1) {
    margin-right: 2rem;
  }
  .col-1-of-4__about img {
    float: left;
  }
  .col-1-of-4__about p {
    margin-top: 10rem;
  }
  .section-bottom p {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .col-1-of-4__about {
    margin-bottom: 3rem;
  }
}