body {
  --litobc-dark-gray: var(--wp--preset--color--dark-gray, #222224);
  --litobc-gray: var(--wp--preset--color--gray, #8e8e94);
  --litobc-light-gray: var(--wp--preset--color--light-gray, #dfdfe1);
  --litobc-base-gray: var(--wp--preset--color--base-gray, #f5f5f9);

  --litobc-font-size-xs: var(--wp--preset--font-size-xs, 0.75rem);
  --litobc-font-size-sm: var(--wp--preset--font-size-sm, 0.875rem);
  --litobc-radius-sm: var(--wp--custom--radius-sm, clamp(0.25rem, 0.2137rem + 0.1613vw, 0.375rem));
  --litobc-radius-md: var(--wp--custom--radius-md, clamp(0.5rem, 0.309rem + 0.566vw, 0.8125rem));
  --litobc-spacing-box: var(--wp--preset--spacing-box, clamp(1.25rem, 1.1226rem + 0.3774vw, 1.5rem));
}

.dark body {
  --litobc-dark-gray: var(--wp--custom--color--dark-gray-darkmode);
  --litobc-light-gray: var(--wp--custom--color--light-gray-darkmode);
  --litobc-base-gray: var(--wp--custom--color--base-gray-darkmode);
}

.wp-block-lito-blogcard {
  container-type: inline-size;
}

.litobc {
  margin: 0;
}

.litobc-item {
  padding: var(--litobc-spacing-box);
  display: flex;
  flex-direction: row-reverse;
  overflow: hidden;
  line-height: 1.5;
  border: 2px solid var(--litobc-light-gray);
  border-radius: var(--litobc-radius-md);
  color: var(--litobc-dark-gray);
  text-decoration: none;
  gap: 1.5rem;
  transition: border-color 0.2s;

  &:hover {
    border-color: var(--litobc-gray);
  }
}

.litobc-figure {
  flex-shrink: 0;
  margin-bottom: 0;

  & > img {
    object-fit: cover;
    width: 4rem;
    aspect-ratio: 1 / 1;
    border-radius: var(--litobc-radius-sm);
  }
}

.litobc-content {
  flex-grow: 1;
  display: grid;
  gap: 0.5rem;
}

.litobc-message {
  font-size: 0.875rem;
  color: var(--litobc-gray);
  margin-top: 0.25rem;
}

.litobc-title {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  font-weight: 700;
}

.litobc-description {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  font-size: 0.75rem;
  color: var(--litobc-gray);
}

.litobc-cite {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.5rem;
}

.litobc-favicon {
  width: 16px;
  border-radius: 0.125rem;
}

.litobc-domain {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--litobc-gray);

  &:hover {
    color: var(--litobc-gray);
  }
}

@container (768px <= width) {
  .litobc-figure > img {
    width: 5rem;
  }
}