* {
  box-sizing: border-box;
}

body {
  background: #acb881;
  color:#2c2b28;
  transition:font-size .3s;
}

img {
  max-width: 100%;
}

.wrapper {
  max-width:1100px;
  margin:0 auto;
}

header {
  text-align: center;
  padding:20px;
  border:1px solid;
  margin-bottom:10px;
}

main {
  display: flex;
  gap: 10px;
  margin-bottom:10px;
}

main div {
  border:1px solid;
  padding:20px;
}

.left {
  width:25%;
}

.center {
  width:50%;
}

.right {
  width:25%;
}

footer {
  border:1px solid;
  padding:20px;
  text-align: center;
}

/* max width desktop first */
@media screen and (max-width:900px) {
  body {
    background: #e5c6aa;
  }

  main {
    flex-wrap:wrap;
  }

  .left {
    width:100%;
  }

  .center, .right {
    width:49%;
    width:calc(50% - 5px);
  }
}

@media screen and (max-width:600px) {
  html {
    font-size: 200%;
  }

  body {
    background: #dbbebb;
  }

  .left, .center, .right {
    width:100%;
  }
}