/** * Batch3c: reviews + highlights. */ .aksrt-reviews { margin-bottom: 16px; --aksrt-rev-pc: 3; --aksrt-rev-m: 1.2; } .aksrt-reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--aksrt-rev-pc) - 1) * 12px) / var(--aksrt-rev-pc)); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } @media (max-width: 767.98px) { .aksrt-reviews__track { grid-auto-columns: calc((100% - (var(--aksrt-rev-m) - 1) * 12px) / var(--aksrt-rev-m)); } } .aksrt-reviews__slide { scroll-snap-align: start; min-width: 0; } .aksrt-reviews__card { position: relative; border: 1px solid var(--color-line, #e5e7eb); border-radius: 12px; padding: 16px; background: var(--surface-1, #fff); min-height: 100%; } .aksrt-reviews__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .aksrt-reviews__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2, #eee); display: inline-flex; align-items: center; justify-content: center; color: #999; flex-shrink: 0; } .aksrt-reviews__name { font-weight: 700; font-size: 14px; } .aksrt-reviews__name a { color: inherit; text-decoration: none; } .aksrt-reviews__role { font-size: 12px; color: var(--muted-2-color, #888); } .aksrt-reviews__stars { margin-bottom: 8px; font-size: 12px; } .aksrt-reviews__stars .is-on { color: #f5a623; } .aksrt-reviews__stars .is-off { color: #ddd; } .aksrt-reviews__content { font-size: 13px; line-height: 1.55; color: var(--color-ink-2, #444); margin: 0; } .aksrt-reviews__quote { position: absolute; right: 14px; bottom: 10px; opacity: .12; font-size: 28px; } .aksrt-highlights { margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; } .aksrt-highlights__row { display: grid; gap: 12px; } .aksrt-highlights__row.is-large { grid-template-columns: 1fr; } .aksrt-highlights__row.is-medium { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aksrt-highlights__row.is-small { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767.98px) { .aksrt-highlights__row.is-medium, .aksrt-highlights__row.is-small { grid-template-columns: 1fr; } } .aksrt-hl-card { display: flex; gap: 12px; border-radius: 12px; border: 1px solid var(--color-line, #e5e7eb); background: var(--surface-1, #fff); padding: 14px; text-decoration: none; color: inherit; overflow: hidden; min-height: 100%; } .aksrt-hl-card.color-blue { --hl: #3b82f6; } .aksrt-hl-card.color-pink { --hl: #ec4899; } .aksrt-hl-card.color-purple { --hl: #a855f7; } .aksrt-hl-card.color-green { --hl: #22c55e; } .aksrt-hl-card.color-orange { --hl: #f97316; } .aksrt-hl-card.color-cyan { --hl: #06b6d4; } .aksrt-hl-card.size-large { min-height: 140px; } .aksrt-hl-card__media { width: 96px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2, #f3f4f6); } .aksrt-hl-card.size-large .aksrt-hl-card__media { width: 160px; } .aksrt-hl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 80px; } .aksrt-hl-card__body { min-width: 0; flex: 1; display: flex; flex-direction: column; } .aksrt-hl-card__icon { color: var(--hl, #3b82f6); font-size: 22px; margin-bottom: 8px; } .aksrt-hl-card__title { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .aksrt-hl-card__desc { font-size: 12px; color: var(--muted-2-color, #888); line-height: 1.5; }