.article .cards {
  padding: 2rem 1.25rem 4rem 1.25rem;
  
  .card {
    margin: 0 0 2rem 0;

    a {
      display: grid;
      grid-gap: 0 1.5rem;
      grid-template-columns: 1fr 1.5fr;

      img {
        grid-column: 1;
        max-width: 100%;
        border: .15rem solid var(--w-color);
        border-radius: .25rem;
      }

      .meta {
        grid-column: 2;

        h3 {
          font-size: 1.55rem;
          font-weight: 600;
          line-height: 2.05rem;
          padding: 0;
          margin: .5rem 0;
        }
    
        p {
          color: var(--fs-color);
          font-size: 1.1rem;
          font-weight: 300;
        }

        h3,
        .desc {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .desc {
          padding: 0 1rem 0 0;
        }

        .date,
        .tags {
          display: inline-block;
          font-size: .9rem;
          padding: 0 1.5rem 0 0;
          margin: 0;
        }
    
        .tags {
          padding: 0;
    
          &:not(:last-child):after {
            position: relative;
            content: '•';
            font-size: .7rem;
            padding: 0 .35rem;
            top: -.05rem;
          }
        }
      }
    }
  }
}

@media only screen and (--viewport-4) {
  .article .cards {
    padding: 2rem 2.25rem 4rem 2.25rem;
    
    .card {
      margin: 0 0 3rem 0;
  
      a {
        display: block;

        .meta {
          .desc {
            margin: .5rem 0;
          }

          .date {
            display: none;
          }
        }
      }
    }
  }
}