.qbj-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 12px 0;
  border: 6px solid #FFFFFF;
  background: #FFFFFF;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.qbj-card:hover {
  border: 6px solid #FEE4E9;
  box-shadow: 0 12px 18px -8px rgba(0, 0, 0, 0.22);
}

.qbj-card__media { flex: 0 0 180px; }
.qbj-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 12px 18px -8px rgba(0, 0, 0, 0.22);
}
.qbj-card__body { flex: 1 1 auto; min-width: 0; }

.qbj-card__badges { display: flex; gap: 6px; margin-bottom: 9px; }
.qbj-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  background: #eef0f4;
  color: #4a5263;
}
.qbj-badge--guide   { background: #e7edf9; color: #29457f; }
.qbj-badge--tip     { background: #fdf0e3; color: #8a5a12; }
.qbj-badge--article { background: #ecebf6; color: #4a3f86; }
.qbj-badge--level   { background: transparent; color: #6b7480; border: 1px solid #d7dbe2; }

.qbj-card__title {
  display: block;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 7px;
  text-wrap: balance;
  font-weight: bold;
  color: #B35A6A !Important;
}
.qbj-card__excerpt {
 margin: 0 0 9px;
 font-size: 18px;
 line-height: 1.55;
 }

.qbj-card__date {
 font-size: 13px;
 opacity: 0.7;
 }

@media (max-width: 640px) {
  .qbj-card { flex-direction: column; }
  .qbj-card__media { flex: none; width: 100%; max-width: 260px; }
}
.qbj-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qbj-card__media {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
}
.qbj-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 12px 18px -8px rgba(0, 0, 0, 0.22);
}
.qbj-card__play {
background: gray;
    border-radius: 50%;
    color: white;
}
.qbj-card__videolabel {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8494;
}