#tofu-wrapper {
  max-width: 960px;
  margin: auto;
}

h1,
h2,
h3 {
  margin: 0;
}

@media only screen {
  #carrots {
    float: none;
    width: auto;
    clear: both;
  }

  .carrot {
    float: left;
    width: 50%;
  }

  .carrot .quote,
  .carrot .cite {
    padding-right: 7%;
  }

  #seitan {
    float: right;
    width: 50%;
  }

  #seitan img {
    max-width: 100%;
  }

  #tvp,
  #beans,
  #tempeh {
    float: left;
    width: 50%;
  }

  #beans {
    clear: left;
  }

  .bean ul {
    padding-left: 0;
    margin-top: 1%;
  }

  .bean li {
     display: inline;
     margin-right: 2%;
  }

  #tvp h1 {
    font-size: 2em;
  }

  #tvp h2 {
    font-size: 1em;
    font-weight: normal;
  }

  #tempeh p {
    padding-right: 5%;
  }
}

@media only screen and (max-width: 768px) {
  #seitan img {
    max-width: 100%;
  }

  #carrots {
    float: right;
    width: 50%;
    clear: none; 
  }

  .carrot {
    width: auto;
    float: none;
  }

  #tvp h1 {
    font-size: 2.5em;
  }

  #tvp h2 {
    font-size: 1.5em;
    font-weight: normal;
  }

  .bean {
    float: left;
    width: 50%;
  }

  .bean ul {
    padding-left: 12%;
  }

  .bean li {
    display: list-item;
    margin-right: 4%;
  }

  #beans {
    clear: left;
  }
}

@media only screen and (max-width: 480px) {
  #seitan {
    float: none;
    width: auto;
  }

  #seitan img {
    max-width: 100%;
  }

  #tvp {
    text-align: center;
  } 

  #beans,
  #carrots,
  #tvp {
    float: none;
    width: auto;
    margin-bottom: 5%;
  }

  .bean {
    width: auto;
    float: none;
    margin-left: 5%;
  }

  #tvp h1 {
    font-size: 2.5em;
  }

  #tvp h2 {
    font-size: 1.5em;
    font-weight: normal;
  }

  #tempeh {
    float: none; 
    width: auto;
    margin-bottom: 5%;
  }

  #tempeh p {
    padding: 0% 5%;
  }
}