Simple Grid Listing

<Set query=loop_query type=post orderby=date order=desc />
<If loop query=loop_query>
  <ul class="tt-loop grid-cols grid-md-col-3 grid-sm-col-2">
    <Loop query=loop_query>
      <li class="tt-item tt-item--card {Field post_class}">
        <div class="tt-item__wrapper">
          <If field=image>
            <div class="tt-item__image">
              <img src="{Field image_url size=large}" class="{Field image_post_class}" alt="{Field image_alt}" srcset="{Field image_srcset size=large}" sizes="{Field image_sizes size=large}">
            </div>
            <Else />
            <div class="tt-item__image--placeholder"></div>
          </If>
          <div class="tt-item__content">
            <If loop type=taxonomy_term taxonomy=category post=current exclude=1>
              <div class="tt-item__terms">
                <Loop type=taxonomy_term taxonomy=category post=current exclude=1 count=1>
                  <a href="{Field url}" class="tt-item__terms__item">
                    <Field title />
                  </a>
                </Loop>
              </div>
            </If>
            <a href="{Field url}" class="tt-item__title"><h3 class="tt-item__title__text"><Field title /></h3></a>
            <div class="tt-item__description"><Field excerpt /></div>
          </div>
          <div class="tt-item__footer">
            <div class="tt-item__meta">
              <div class="tt-item__meta__item tt-item__author">
                <div class="tt-item__author__avatar"><Field author_avatar size=50 /></div>
                <div class="tt-item__author__name">By <Field author_full_name /></div>
              </div>
              on
              <span class="tt-item__meta__item tt-item__date"><Field publish_date date_format="F j, Y" /></span>
            </div>
          </div>
        </div>
      </li>
    </Loop>
  </ul>
  <Else />
  Nothing found
</If>

$card--background-color: #fff;
$card--border-radius: 4px;
$card--box-shadow: 0 3px 0 #f0f1f2;
$card--border: 1px solid #f0f1f2;

$card--hover--box-shadow: 0 1px 0 #f0f1f2;

$card--accent-color: #002deb;
$card--hover--accent-color: #0024bc;


ul.tt-loop {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.tt-item {
  &--card .tt-item__wrapper {
    height: 100%;
    background-color: $card--background-color;
    border-radius: $card--border-radius;
    box-shadow: $card--box-shadow;
    border: $card--border;
    transition: box-shadow 0.2s ease-in-out;

    &:hover, &:focus-within {
      box-shadow: $card--hover--box-shadow;
    }

    .tt-item__image, .tt-item__image--placeholder {
      border-top-left-radius: ($card--border-radius - 1px);
      border-top-right-radius: ($card--border-radius - 1px);
    }
  }
  &__wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  &__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.04);
      transition: transform 0.2s ease-in-out;
    }
    &--placeholder {
      aspect-ratio: 16 / 9;
      background-color: $card--accent-color;
    }
  }
  &__terms {
    position: relative;
    z-index: 1;
    &__item {
      font-size: 13px;
      padding: 0.2em 0.4em;
      background-color: $card--accent-color;
      border-radius: $card--border-radius;
      color: #fff;
      text-decoration: none;
      transition: background-color 0.2s ease-in-out;

      &:hover, &:focus {
        background-color: $card--hover--accent-color;
        color: #fff;
      }
    }
  }
  &__content {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
    padding: 15px;
  }
  &__title {
    text-decoration: none;
    
    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    &__text {
      font-size: 20px;
      line-height: 1.2;
    }
  }
  &__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    color: #404040;
    border-top: $card--border;
    padding-top: 15px;
  }
  &__author {
    display: flex;
    gap: 5px;
    align-items: center;

    &__avatar {
      flex: 0 0 25px;

      img {
        width: 25px;
        height: 25px;
        border-radius: 100%;
      }
    }
  }
  &__description {
    color: #404040;
  }
  &__footer {
    margin-top: auto;
    padding: 15px;
  }
  &__wrapper {
    &:hover, &:focus {
      .tt-item__image img {
        transform: scale(1.01);
      }
    }
  }
}
// Layouts
$breakpoints: (
  xs: '0',
  sm: '576px',
  md: '768px',
  lg: '1025px',
  xl: '1200px',
);

.grid-cols::before {
  display:none
}
.grid-cols {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  -webkit-column-gap:1rem;
  -moz-column-gap:1rem;
  column-gap:1rem;
  row-gap:1rem;
}
@each $key,$value in $breakpoints {
  @media screen and (min-width: #{$value}) {
    .grid-cols.grid-#{$key}-col-1 {
      grid-template-columns:minmax(0, 1fr)
    }
    .grid-cols.grid-#{$key}-col-2 {
      grid-template-columns:repeat(2, minmax(0, 1fr))
    }
    .grid-cols.grid-#{$key}-col-3 {
      grid-template-columns:repeat(3, minmax(0, 1fr))
    }
    .grid-cols.grid-#{$key}-col-4 {
      grid-template-columns:1fr 1fr 1fr 1fr
    }
    .grid-cols.grid-#{$key}-col-5 {
      grid-template-columns:1fr 1fr 1fr 1fr 1fr
    }
    .grid-cols.grid-#{$key}-col-6 {
      grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr
    }
  }
}