/** Type scale System */
/** 38px, 30px, 24px, 19px, 15px, 12.5px, 10px, 8px, 6px, 5px  */

/** Spacing System */
/** 400px, 350px, 300px, 160px, 120px, 96px, 80px, 64px, 48px, 40px, 32px, 24px, 16px, 12px, 8px, 4px, 2px */

.section__bookmarks-title {
  font-size: var(--fs-30px);
  color: #444;
  margin-bottom: var(--spacing-24px);
}

.bookmarks {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16px);
}

.bookmarks__card {
  min-width: 24%;
  position: relative;
  border-radius: var(--spacing-4px);
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  flex-basis: 200px;
  flex-shrink: 0;
  flex-grow: 0;
}

.bookmarks__card__link {
  text-decoration: none;
}

/* .bookmarks__card__img-container {
  width: 100%;
  height: 50%;
} */

.bookmarks__card__img-container img {
  width: 100%;
  height: var(--spacing-160px);
  object-fit: cover;
  object-position: center;
}

.bookmarks__card__text-container {
  padding: var(--spacing-16px);
  padding-top: var(--spacing-8px);
}

.bookmarks__card__bookmarked-on {
  display: flex;
  align-items: center;
  gap: var(--spacing-4px);

  font-size: var(--fs-15px);
  margin-top: var(--spacing-8px);
  /* font-weight: 500; */
  color: #555;
}

.bookmarks__card__title {
  font-size: var(--fs-19px);
  margin-bottom: var(--spacing-8px);
  color: #444;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bookmarks__card__author {
  font-size: var(--fs-15px);
  margin-bottom: var(--spacing-4px);
  color: #555;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.bookmarks__card__publishedat {
  font-size: var(--fs-15px);
  color: #555;
}

.no-bookmarks-container {
  text-align: center;
  margin: 0 auto;
}

.no-bookmarks-img-container {
}

.no-bookmarks-img-container img {
  width: var(--spacing-160px);
  height: var(--spacing-160px);
}

.no-bookmarks-title {
  font-size: var(--fs-38px);
  color: #888;
}