<div class="card">
  <img src="https://i.imgbox.com/cbNu4TvF.jpg" />
  <h2>Pellentesque habitant morbi.</h2></div>

<div class="card">
  <img src="https://i.imgbox.com/9lSDASI2.jpg" />
  <h2 class="large-heading">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2></div>

<div class="card">
  <img src="https://i.imgbox.com/XWZEeur6.jpg" />
  <h2>Pellentesque habitant morbi tristique senectus.</h2></div>

<div class="card">
  <img src="https://i.imgbox.com/uDtDYUuo.jpg" />
  <h2 class="large-heading">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2></div>

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

body {
  font-family: 'Lato';
  font-weight: 300;
  color: black;
  font-size: 1.25em;
  text-align: center;
  margin: 0 auto;
  width: 650px;
}

h2 {
  text-align: center;
  font-size: 1.25em;
  font-weight: 300;
}


.card {
  display: inline-block;
  padding: 10px;
  width: 300px;
  height: 300px;
  background: wheat;
  margin: 15px 10px;
  float: left;
}

img {
  width: 100%;
}

@element ".card h2" and (min-characters: 50) {
  $this {
    font-size: 1em;
  }
}

$("button").on("click", function() {
  if ($(this).text() == "Add Sidebar") {
    $(".content").css("width", "60%");
    $(".sidebar").css("display", "block");
    $(this).html("Remove Sidebar");
  } else {
    $(".content").css("width", "100%");
    $(".sidebar").css("display", "none");
    $(this).html("Add Sidebar");
  }
  
  EQCSS.apply();
});