* {
  box-sizing: border-box;
}
html {
  font: 0.625em/1.4 "Lato", Helvetica Neue, sans;
}
body {
  font-size: 1.6em;
  margin: 4rem;
  background-color: rgb(248,248,248);
  color: rgb(120,120,120);
}
p {
  margin: 0;
}

h1,h2,h3,h4 {
  line-height: 1.2;
  font-weight: 300;
  margin: 0;
}
h3 {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 0.65em;
  color: rgb(71,77,87);
}
h4 {
  font-size: 1.8rem;
  margin-bottom: 0.25em;
  color: rgb(191, 45, 36);
}

//Layout 
.layout {
  margin: auto;
}
// CheckList Component

.CheckList {
  max-width: 48em;
}
  .CheckList-row {
    display: table;
    width: 100%;
    background-color: rgb(255,255,255);
    
    &.completed {
      background-color: transparent;
    }
  }
  .CheckList-row + h3 {
    margin-top: 2.4rem;
  }
  .CheckList-row:last-child > .CheckList-cell {
    border-width: 0;
  }

  .CheckList-cell {
    display: table-cell;
    padding: 1.6rem;
    border-bottom: 1px solid rgb(201,201,201);
    vertical-align: middle;
  }
  .CheckList-icon {
    width: 98px;
    height: 98px;
    text-align:center;
  }
  .CheckList-hint {
    display: none;
    
    @media (min-width: 40em){
      display: block;
    }
  }

  .completed .CheckList-hint {
    display: none;
  }

  .completed h4 {
    color: inherit;
  }