/**
 * Layout saigonchess11 — "Ảnh trái · 4 cột × 3 bài"
 *
 * Phần khung dùng chung với saigonchess10, nằm ở `assets/saigonchess.css` dưới
 * lớp `.scn-sidegrid`. File này chỉ siết lại cho bản ba bài mỗi cột: ảnh nhỏ
 * hơn một chút và chữ cắt sớm hơn, để ba hàng chồng nhau vẫn gọn.
 *
 * ⚠ Ba lớp chứ không phải hai: stylesheet của kiểu bài (scn-side) nạp SAU file
 * này, nên viết hai lớp là bằng điểm và thua ở thứ tự.
 */

.saigonchess11 .jacl-item__inner > .jacl-item__media {
  flex: 0 0 42%;
  max-width: 42%;
}

.saigonchess11 .jacl-item__inner {
  gap: 11px;
}

.saigonchess11 .jacl-item__body .jacl-item__title {
  font-size: .86rem;
  line-height: 1.3;
}

.saigonchess11 .jacl-item__body .jacl-item__title a {
  -webkit-line-clamp: 2;
}

.saigonchess11 .jacl-item__body .jacl-item__introtext {
  font-size: .8rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.saigonchess11 .highlight-item .jacl-item__inner > .jacl-item__media {
  flex-basis: 36%;
  max-width: 36%;
}

/* Còn hai cột trở xuống thì ô rộng hẳn ra, cho tiêu đề thêm một dòng. */
@container (max-width: 1000px) {
  .saigonchess11 .jacl-item__inner > .jacl-item__media {
    flex-basis: 34%;
    max-width: 34%;
  }
  .saigonchess11 .jacl-item__body .jacl-item__title a {
    -webkit-line-clamp: 3;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .saigonchess11 .jacl-item__inner > .jacl-item__media {
      flex-basis: 34%;
      max-width: 34%;
    }
    .saigonchess11 .jacl-item__body .jacl-item__title a {
      -webkit-line-clamp: 3;
    }
  }
}