.modes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:0 auto;max-width:1200px;padding:0 16px}.modes-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;max-height:calc(2*(120px + 30px));overflow:hidden;margin-left:20px;margin-right:20px}.device-filter,.filter-bar{display:flex;justify-content:center}.filter-bar{margin:20px 0 5px}.device-filter{gap:10px;flex-wrap:wrap}.filter-button,.filter-button input[type=checkbox]+label{display:flex;align-items:center;cursor:pointer;border-radius:8px}.filter-button{justify-content:center;padding:0}.filter-button input[type=checkbox]{display:none}.filter-button input[type=checkbox]+label{gap:8px;padding:8px 14px;user-select:none;-webkit-user-select:none;border:1px solid #333;background-color:#1a1a1a;color:#777;transition:all .2s}.filter-button input[type=checkbox]+label img{height:22px;width:22px;opacity:.4;transition:opacity .2s}.filter-button input[type=checkbox]:checked+label{background-color:#1a2e2a;border-color:#2a8a7a;color:#ccc}.filter-button input[type=checkbox]:checked+label img{opacity:1}.filter-button input[type=checkbox]:not(:checked)+label:hover{background-color:#242424;border-color:#555;color:#aaa}.filter-button input[type=checkbox]:not(:checked)+label:hover img{opacity:.7}.filter-button input[type=checkbox]:checked+label:hover{background-color:#1e3430;border-color:#3a9a8a;color:#eee}.pagination-bar,.per-page{display:flex;align-items:center}.pagination-bar{justify-content:center;gap:16px;margin:0;flex-wrap:wrap}#pagination-bar-top{margin-bottom:30px}#pagination-bar-bottom{margin-top:30px;margin-bottom:30px}.per-page{gap:6px;color:#aaa;font-size:13px}.per-page select{background:#222;color:#ccc;border:1px solid #555;border-radius:4px;padding:6px 10px;font-size:13px;cursor:pointer;outline:0}.per-page select:hover{border-color:#1abc9c}.per-page select:focus{border-color:#1abc9c;box-shadow:0 0 4px rgba(26,188,156,.4)}.pagination{list-style:none;display:flex;padding:0;gap:6px;margin:0}.pagination li{display:inline-block}.pagination a,.pagination span{display:block;padding:8px 12px;color:#fff;background-color:#222;border:1px solid #888;border-radius:4px;text-decoration:none;font-weight:700;transition:background-color .3s ease;font-size:13px}.pagination li.active a{background-color:#1abc9c;color:#fff;border-color:#1abc9c;pointer-events:none}.pagination a:hover{background-color:#444}.pagination li.disabled span{opacity:.5;pointer-events:none;cursor:default}