<header class="c-header">
  <h1>Hiding On The Web</h1>
  <p>A cheatsheet to hide elements on the web</p>
</header>
<div class="o-wrapper">
  <main>
    <div class="o-grid">
      <div class="o-grid__item">
        <article class="c-property">
          <h2 class="c-property__title">HTML [Hidden] Attribute</h2>
          <ul class="c-property__info">
            <li><span>Accessible:</span><span>No</span></li>
            <li><span>Keyboard:</span><span>No</span></li>
            <li><span>Transitionable:</span><span>No</span></li>
          </ul>
        </article>
      </div>
      <div class="o-grid__item">
        <article class="c-property">
          <h2 class="c-property__title">Display</h2>
          <ul class="c-property__info">
            <li><span>Accessible:</span><span>No</span></li>
            <li><span>Keyboard:</span><span>No</span></li>
            <li><span>Transitionable:</span><span>No</span></li>
          </ul>
        </article>
      </div>
      <div class="o-grid__item">
        <article class="c-property">
          <h2 class="c-property__title">Opacity</h2>
          <ul class="c-property__info">
            <li><span>Accessible:</span><span>Yes</span></li>
            <li><span>Keyboard:</span><span>Yes</span></li>
            <li><span>Transitionable:</span><span>Yes</span></li>
          </ul>
        </article>
      </div>
      <div class="o-grid__item">
        <article class="c-property">
          <h2 class="c-property__title">Visibility</h2>
          <ul class="c-property__info">
            <li><span>Accessible:</span><span>No</span></li>
            <li><span>Keyboard:</span><span>No</span></li>
            <li><span>Transitionable:</span><span>Yes</span></li>
          </ul>
        </article>
      </div>
      <div class="o-grid__item">
        <article class="c-property">
          <h2 class="c-property__title">Clip Path</h2>
          <ul class="c-property__info">
            <li><span>Accessible:</span><span>Yes</span></li>
            <li><span>Keyboard:</span><span>Yes</span></li>
            <li><span>Transitionable:</span><span>Yes</span></li>
          </ul>
        </article>
      </div>
    </div>
  </main>

  <footer>

  </footer>
</div>

.c-header {
  color: #fff;
  background: #01579B;
  font-family: antarctican-headline, sans-serif;
  text-align: center;
  padding: 1rem;
  margin-bottom: 2rem;
  border-bottom: 8px solid darken(#01579b, 10%);
  
  h1 {
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 1px;
  }
  
  p {
    font-family: antarctican-headline,sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
}

.c-property {
  padding: 1rem;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 10px 0 rgba(#000, 0.05), 0 10px 15px rgba(#000, 0.05);
  
  h2 {
    margin-bottom: 1rem;
    color: #01579b;
  }
}

.c-property__title {
  font-weight: bold;
  font-size: 1.15rem;
}

.c-property__info {
  li {
    display: flex;
    justify-content: space-between;
    color: #222;
    
    &:not(:last-child) {
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.5rem;
      margin-bottom: 0.5rem;
    }
  }
}

.o-wrapper {
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
}

body {
  background: #fafafa;
  line-height: 1.5;
  font-family: "Arial";
}

* {
  box-sizing: border-box;
}