@media all and (max-width:767px) {
  .col figcaption span:not(.close) {
    display: block;
    margin-top: -3.5rem;
  }
  
  .row, footer, .trending {
    max-width: 360px;
  }
}

@media all and (max-width:1127px) {
  footer {
    text-align: center;
  }
  
  footer ul {
    margin-top: .5rem;
  }
  
  footer li {
    margin-left: .5rem;
    margin-right: .5rem;
  }
}

/* Mobile Devices */
@media only screen and (min-width: 640px) {
  .header-wrapper h3 { display: inline-block; }
}

@media all and (min-width:768px) {
  .col.active figcaption span {
    display: none;
  }
  
  .header-wrapper {
    margin: 0 20px 0 30px;
  }
  
  .grid {
    margin-left: auto;
    margin-right: auto;
  }
  
  .row, footer, .trending {
    margin-left: auto;
    margin-right: auto;
    width: 721px;
  }
  
  .col {
    float: left;
  }
  
  .span_4_of_12 {
    width: 50%;
  }
  
  .product .col {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .product figcaption {
    height: 15.5rem;
    padding: 2rem;
  }
  
  .issue-2503 .product figcaption {
    height: 16rem;
  }
  
  .product--details {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: 75rem;
  }
  
  .product--details.active {
    border: 15px solid rgba(255, 255, 255, 0.75);
    visibility: visible;
  }
  
  .herotext {
    margin-top: 20rem;
  }
  
  #hero {
    height: 500px;
    -webkit-background-size: 1127px auto;
       -moz-background-size: 1127px auto;
         -o-background-size: 1127px auto;
            background-size: 1127px auto;
  }
  
  #hero h1 {
    font-size: 70px;
    line-height: 70px;
  }
  
  #hero h1 small {
    font-size: 30px;
    line-height: 30px;
  }
  
  .product--details.active .action--close {
    top: 577px;
  }
  
  footer {
    width: 691px;
  }
  
  footer li {
    margin-left: 1rem;
  }
  
  .trending--wrapper { 
    margin: 8px -8px; 
  }
  
  .trending--item {
    float: left;
    width: 20%;
    padding: 8px;
    border: none;
  }
  
  .trending--item figure {
    width: 100%;
  }
}

@media all and (min-width: 1128px) {
  .row, footer, .trending {
    width: 1081px;
  }
  .span_4_of_12 {
    width: 33.33%;
  }
  
  .product--details {
    width: 1111px;
  }
  
  .product--details img {
    display: inline-block;
    float: left;
    width: 760px;
    vertical-align: top;
  }
  
  .product--details figcaption {
    display: inline-block;
    float: left;
    height: 608px;
    width: 321px;
  }
  
  .product--details figcaption h3 {
    margin-right: 3rem;
  }
  
  .product--details.active .action--close {
    top: 0;
  }
  
  .herotext {
    margin-top: 23rem;
  }
  
  #hero {
    height: 600px;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
  
  #hero h1 {
    font-size: 94px;
    line-height: 85px;
  }
  
  #hero h1 small {
    font-size: 35px;
    line-height: 35px;
  }
  
  footer {
    width: 1051px;
  }
  
  footer ul {
    float: right;
  }
}