.index .cards,
.templates .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem;
  padding: 0 2rem;
  margin: 3rem auto 2rem auto;

  .template {
    position: relative;
    display: inline-block;
    min-width: 15rem;
    border-radius: .25rem;

    .preview {
      display: block;
      min-height: 10rem;

      img {
        width: 100%;
        min-height: 10rem;
        background: var(--b-color);
        outline: none;
        border: none;
        box-shadow: none;
        inset: none;
      }
    }
    
    .details {
      display: grid;
      grid-template-columns: 4fr 4fr 1fr;
      grid-gap: .25rem .5rem;
      padding: 1rem .1rem;

      .title {
        grid-column: 1/3;
        width: fit-content;
      }

      h5 {
        font-size: 1.225rem;
        font-weight: 400;
        line-height: 1.35;
        margin: 0;
      }

      p {
        grid-column: 1/4;
        min-height: 1.25rem;
        color: var(--ft-color);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.25rem;
        margin: 0 0 .5rem 0;
        text-align: left;
      }

      span {
        float: right;
        background: var(--q-color);
        font-size: .825rem;
        font-weight: 500;
        padding: .225rem .5rem;
        border: .1rem solid var(--s-color);
        border-radius: var(--radius-full);
      }
      
      .doc,
      .demo,
      .select {
        color: var(--fs-color);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1rem;
        padding: .5rem .75rem;
        margin: 0;
        border: .15rem solid var(--s-color);
        border-radius: var(--radius);
        text-align: center;
  
        &:hover {
          cursor: pointer;
          background: var(--brh-color);
        }
      }

      .select {
        grid-column: 2/4;
      }
    }
  }
}

@media only screen and (min-width: 834px) {
  .index .cards,
  .templates .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}