@font-face {
  font-family: myFirstFont;
  src: url(https://d33wubrfki0l68.cloudfront.net/9f02a726216e5782250ec9dc5a23397ff9e61477/c8999/static/fonts/akkurat/akkuratmonollweb-regular.woff); 
}

body {
    width: 80%;
    margin: 30px auto;
    font-family: myFirstFont;
    counter-reset: my-sec-counter;
    background-color: black;
    color: #fff;
  }
  
  h3 {
    text-align: center;
    font-size: 1.0em;
    margin: 0 0 30px;
  }
  
  div {
    font-size: 0;
  }
  


  a {
    font-size: 1.8vw;
    display: inline-block;
    margin-bottom: 8px;
    width: calc(50% - 14px);
    margin-right: 12px;
    text-decoration: none;
    color: rgb(255, 255, 255);
  }
  
  a:nth-of-type(2n) {
    margin-right: 0;
  }
  
  @media screen and (min-width: 50em) {
    a {
      width: calc(25% - 16px);
      font-size: 0.75vw;
    }
    
    a:nth-of-type(2n) {
      margin-right: 8px;
    }
    
    a:nth-of-type(4n) {
      margin-right: 0;
    }
  }
  
  a:hover img {
    transform: scale(0.98);
  }
  
  figure {
    margin: 0;
    overflow: hidden;
  }
  
  h2::before {
    counter-increment: my-sec-counter 1;
    content: "" counter(my-sec-counter) "..";
  }

  figcaption::before
  {
    counter-increment: my-sec-counter 1;
    content: "" counter(my-sec-counter) "..";
  }
  
  figcaption {
    margin-top: 15px;
  }
  
  img {
    border: none;
    max-width: 100%;
    height: auto;
    display: block;
    background: rgb(255, 255, 255);
    transition: transform .2s ease-in-out;
  }
  
  .p a {
    display: inline;
    font-size: 13px;
    margin: 0;
    text-decoration: underline;
    color: rgb(255, 255, 255);
  }
  
  .p {
    text-align: center;
    font-size: 14px;
    padding-top: 100px;
  }