diff --git a/assets/frontend.css b/assets/frontend.css index 6580a73..f569134 100644 --- a/assets/frontend.css +++ b/assets/frontend.css @@ -111,11 +111,25 @@ .kc-phase{margin:18px 0;padding:12px;border-radius:12px;background:#fbfffe;border:1px solid #e6f3ee;} .kc-result .kc-inner { max-width:1100px; margin:0 auto; padding:0 14px; box-sizing:border-box; } .kc-workshops-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 14px; - margin-top: 12px; - align-items: start; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 16px; + margin-top: 12px; + align-items: start; +} + +/* Responsive tuning: adapt card count per row */ +@media (max-width: 1024px) { + .kc-workshops-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } +} +@media (max-width: 768px) { + .kc-workshops-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } +} +@media (max-width: 560px) { + .kc-workshops-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } +} +@media (max-width: 420px) { + .kc-workshops-grid { grid-template-columns: 1fr; gap: 8px; } } .kc-workshop-card { box-sizing: border-box;