ul {
  margin: 10px auto;
  padding: 0 10px;
  
  li {
    position: relative;
    padding-left: 80px;
    min-height: 70px;
    list-style: none;
    
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 70px;
    }
    
    a {
      color: #222;
      text-decoration: none;
      
      span {
        font-size: 1em;
        font-weight: 700;
        text-decoration: underline;
      }

      p {
        margin: 0;
        color: #575757;
      }
    }
    
    & + li {
      margin-top: 20px;
    }
  }
}


@media (min-width: 20em) {
  // Base style
  ul {
    margin: 0;
    padding: 0;
    
    li {
      padding-left: 0;
      
      & + li {
        margin-top: 0;
      }
    
      a {
        display: block;
        position: relative;
        padding-top: 20em;
        width: 100%;
        overflow: hidden;
        background-color: #444;
        // Prevent font-smoothing issues on hover
        -webkit-font-smoothing: antialiased;

        &::before,
        &::after {
          display: block;
          position: absolute;
          left: 0;
          padding-top: 20em;
          width: 100%;
          pointer-events: none;
          content: '';
        }

        &::before {
          top: 0;
          z-index: 402;
          background-color: rgba(0, 0, 0, .3);
          background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .15) 33%,rgba(255, 255, 255, 0) 34%);
          background-size: 3px;
        }

        &::after {
          top: 0;
          z-index: 401;
          opacity: 1;
          background-image: linear-gradient(to bottom, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.1) 13%, rgba(25, 25, 25, 0.5) 52%, rgba(25, 25, 25, 0.7) 86%);
        }

        > img {
          top: 50%;
          z-index: 400;
          transform: translateY(-50%);
          width: 100%;
        }

        > img + span {
          display: block;
          position: absolute;
          z-index: 500;
          top: 30px;
          right: 30px;
          left: 30px;
          padding: 20px 0 20px;
          color: #fff;
          font-size: 20px;
          font-weight: 700;
          line-height: 26px;
          text-align: right;
          text-decoration: none;
          text-shadow: 0 2px 2px rgba(0, 0, 0, .5);

          &::after {
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 4px;
            background: #fff;
            opacity: 1;
            content: '';
          }
        }

        > p {
          position: absolute;
          z-index: 500;
          right: 30px;
          bottom: 30px;
          left: 30px;
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 1px;
          text-shadow: 0 2px 2px rgba(0, 0, 0, .5);

          > time {
            display: inline-block;
            color: #fff;
            text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
          }
        }

        &:hover,
        &:focus {
          outline: 0;

          &::before {
            box-shadow: inset 0 0 0 5px #bdd7f7;
          }
        }
      }// li, a
    }// ul, li
  } // ul
  
  // Add animation properties
  .no-touch ul {
    > li > a {
      > img + span {
        transform: translateY(20px);
        transition: all ease .35s;
        will-change: transform;

        &::after {
          transform: translateY(2em);
          transition: all ease .35s;
        }
      }
      
      > p {
        transform: translateY(20px);
        transition: all ease .35s;
        color: rgba(255, 255, 255, 0);
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0);

        > time {
          transform: translateY(-20px);
          transition: all ease .35s;
        }
      }
      
      &:hover,
      &:focus {
        outline: 0;
        
        &::after {
          top: 0;
          opacity: 1;
        }
        
        > img + span {
          transform: translateY(0);
          &::after {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        > p {
          transform: translateY(0);
          color: #fff;
          text-shadow: 0 2px 2px rgba(0, 0, 0, .5);

          > time {
            transform: translateY(0);
          }
        }
      }
      
      &:hover::before {
        box-shadow: none;
      }
    } // li, a
  } // .ul
} // @media

@media (min-width: 35em) {
  ul li {
    float: left;
    width: (100% / 2);

    a {
      padding-top: 100%;
      &::before,
      &::after {
        padding-top: 100%;
      }
    }

    &:nth-child(odd):last-child {
      width: 100%;

      a,
      a::before {
        padding-top: 50%;
      }
    }
  }
}

@media (min-width: 55em) {
  ul li {
    max-width: none;
    width: (100% / 3);
    
    &:nth-child(odd):last-child {
      a,
      a::before {
        padding-top: (100% / 3);
      }
    }
  }
}

@media (min-width: 70em) {
  ul li {
    width: (100% / 4);
    
    &:nth-child(odd):last-child {
      width: (100% / 4);
      
      a {
        padding-top: 100%;
      }
    }
    
    &:nth-of-type(4n+1):nth-last-child(2),
    &:nth-of-type(4n+2):last-child,
    &:nth-of-type(4n+3):last-child {
      width: 50%;
      
      a,
      a::before {
        padding-top: 50%;
      }
    }
  }
}

// Unimportant bits
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

ul,
ul > li {
  &::before,
  &::after {
    display: table;
    content: '';
  }
  
  &::after {
    clear: both;
  }
}

header[role="banner"] {
  padding: 20px;
  background-color: #515151;
  background-image: linear-gradient(to bottom, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, 0.1) 13%, rgba(25, 25, 25, 0.4) 52%, rgba(25, 25, 25, 0.6) 86%);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 100% 80px;
}

h1 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 4px solid #fff;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
  // Prevent font-smoothing issues on hover in webkit browser
  -webkit-font-smoothing: antialiased;
}