.sb-looper {
  --gap: .5rem;

  gap: var(--gap);
  display: flex;
  flex-direction: column;
  padding-inline: var(--wp--preset--spacing--spacing-00);
  row-gap: 1rem;
}

.sb-loop-item {
  column-gap: var(--gap);
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
}

.sb-loop-item__image {
  border-radius: .5rem;
  display: flex;
  flex: 0 1 auto;
  height: 9rem;
  object-fit: cover;
  overflow: hidden;
}

.sb-loop-item__image img {
  transition: transform 250ms ease-in-out;
}

.sb-loop-item:hover .sb-loop-item__image img {
  transform: rotate(2deg) scale(105%);
}

.sb-loop-item__content {
  display: flex;
  flex: 1 1 calc(100% - 9rem - var(--gap));
  flex-direction: column;
}

.sb-loop-item__title {
  display: flex;
  flex: 0 0 auto;
  margin-block-end: var(--wp--preset--spacing--spacing-e-30) !important;
}

.sb-loop-item__excerpt {
  display: flex;
  flex: 1 1 auto;
}

.sb-loop-item__metadata {
  column-gap: var(--gap);
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
}

.sb-loop-item__metadata-item {
  align-items: center;
  display: flex;
  margin-block: 0 !important;
}

.sb-loop-item__metadata-item .sb-has-icon {
  display: flex;
}

.sb-loop-item__metadata-item .sb-has-icon > * {
  align-items: center;
  display: flex;
  padding-inline-start: calc(1rem + var(--gap));
}

.sb-loop-item__metadata-item .sb-has-icon > *::before {
  content: '';
  display: inline-block;
  height: 1rem;
  margin-inline-end: var(--gap);
  margin-inline-start: calc(-1rem - var(--gap));
  width: 1rem;
}

.sb-loop-item__metadata-item--date .sb-has-icon > ::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23456ba9' d='M7 11H9V13H7V11M21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5M5 7H19V5H5V7M19 19V9H5V19H19M15 13V11H17V13H15M11 13V11H13V13H11M7 15H9V17H7V15M15 17V15H17V17H15M11 17V15H13V17H11Z'%3E%3C/path%3E%3C/svg%3E");
}

.sb-loop-item__metadata-item--category .sb-has-icon > ::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23456ba9' d='M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z'%3E%3C/path%3E%3C/svg%3E");
}

@media screen and (min-width: 768px) {
  .sb-looper {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .sb-looper .wp-block-post {
    display: flex;
    flex: 1 1 calc(100%/2 - calc(var(--gap)/2));
  }
}