.content {
   max-width: 75rem;
   margin: 3rem auto;
}

.description {
   margin: 1rem;
   padding: 0 1rem;
   overflow: auto;
   box-shadow: #dedede 0px 0px 10px 3px;
}

.description h1,
.description h2,
.description h3,
.description h4,
.description h5,
.description h6 {
   font-weight: 400;
}

.sections {
   padding: 0.5rem 1rem;
   margin: 0;
   list-style: none;
   text-align: center;
}

.sections li {
   display: inline-block;
}

.sections a {
   display: inline-block;
   padding: 0.5rem 1rem;
   border: 1px solid #dedede;
   border-radius: 2rem;
   margin: 0.5rem;

   font-size: 0.9rem;
   text-decoration: none;
   line-height: 1.5;
   color: #837f7e;
   box-shadow: #dedede 0px 0px 10px 3px;
}

.items {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
   padding: 0;
   margin: 0;
   list-style: none;
}

@media (min-width: 25rem) {
   .content {
      width: 25rem;
   }
}

@media (min-width: 50rem) {
   .content {
      width: 50rem;
   }

   .sections {
      text-align: left;
   }
}

@media (min-width: 75rem) {
   .content {
      width: 75rem;
   }

   .items {
      justify-content: left;
   }
}

.items li {
   display: flex;
   flex-direction: column;

   width: 23rem;
   height: 21rem;
   padding: 1rem;
   margin: 1rem;
   box-shadow: #dedede 0px 0px 10px 3px;
   text-align: center;
}

.items li > a {
   flex-grow: 1;
}

.items li .img {
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   height: 100%;
}

.items li h2 {
   margin: 1rem 0;
   font-size: 1.3rem;
   font-weight: 400;
   text-transform: uppercase;
}

.items li h2 a {
   color: inherit;
   text-decoration: none;
}

.items li span {
   margin-right: 1rem;
}

.items li div a {
   display: inline-block;
   padding: 0.5rem;
   background-color: #655e7a;
   font-size: 0.8rem;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.items li div a:hover {
   background-color: #4b455e;
}