.layout {
  display: block;
  background-color: rgba(200, 217, 246, 0.5);
  padding-top: 110px;
  padding-bottom: 40px;
}

.layout .wrapper {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.layout .wrapper .mainContent {
  width: 53%;
}

/* Media Query: Small screens */
@media only screen and (max-width: 992px) and (min-width: 360px) {
  .layout {
    padding: 110px 10px 40px 10px; /* top right/bottom/left */
  }

  .layout .wrapper {
    flex-wrap: wrap;
    width: 100%;
  }

  .layout .wrapper .mainContent {
    width: 100%;
  }
}

/* Media Query: Medium screens */
@media only screen and (max-width: 1299px) and (min-width: 993px) {
  .layout {
    padding: 110px 10px 40px 10px; /* top right/bottom/left */
  }

  .layout .wrapper {
    flex-wrap: wrap;
    width: 100%;
  }
}