/* Base reset */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;

  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* 2160 / 16px = 135 */
@media (max-width: 135em) {
  html {
    font-size: 70%;
  }
}

/* 1440px / 16px = 87.5 */
@media (max-width: 87.5em) {
  html {
    font-size: 60%;
  }
}

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 50%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 45%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 35%;
  }
}

body {
  background: ivory;
}

.row {
  width: 100%;
}

.row > div {
  float: left;
  padding: 3rem;
}

#div1,
#div2,
#div3 {
  width: 100%;
  background: #999999;
  border: 0.3rem solid black;
  border-radius: 0.5rem;
}

h1 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 5rem;
  padding: 5%;
  text-align: center;
}

h2 {
  float: right;
  width: fit-content;
  padding: 2.4rem;
  font-size: 3rem;
  border-top: 0 solid black;
  border-right: 0 solid black;
  border-left: 0.3rem solid black;
  border-bottom: 0.3rem solid black;
  border-radius: 0.5rem;
}

@media (min-width: 922px) {
  .lg-3 {
    width: 33.33%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .md-6 {
    width: 50%;
  }
  #div3Parent {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .sm-9 {
    width: 100%;
  }
}

p {
  clear: right;
  padding: 2.4rem;
  font-size: 3rem;
}

#div1 > h2 {
  background: #d59898;
}
#div2 > h2 {
  background: #c14543;
}
#div3 > h2 {
  background: #e5d198;
}