diff --git a/css/components.css b/css/components.css
index 2d8b307..0e23229 100644
--- a/css/components.css
+++ b/css/components.css
@@ -150,6 +150,31 @@
.grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}
+/* Listings Grid - responsive 2/3/4/5 columns */
+.listings-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-md);
+}
+
+@media (min-width: 640px) {
+ .listings-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+@media (min-width: 900px) {
+ .listings-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+@media (min-width: 1200px) {
+ .listings-grid {
+ grid-template-columns: repeat(5, 1fr);
+ }
+}
+
/* Badges */
.badge {
display: inline-flex;
diff --git a/js/components/pages/page-home.js b/js/components/pages/page-home.js
index e2437a5..2f113bc 100644
--- a/js/components/pages/page-home.js
+++ b/js/components/pages/page-home.js
@@ -33,6 +33,7 @@ class PageHome extends HTMLElement {
`).join('');
@@ -56,17 +57,5 @@ style.textContent = /* css */`
page-home section h2 {
margin-bottom: var(--space-lg);
}
-
- page-home .listings-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: var(--space-md);
- }
-
- @media (min-width: 768px) {
- page-home .listings-grid {
- grid-template-columns: repeat(5, 1fr);
- }
- }
`;
document.head.appendChild(style);
diff --git a/js/components/pages/page-search.js b/js/components/pages/page-search.js
index ccdd0f1..1a61556 100644
--- a/js/components/pages/page-search.js
+++ b/js/components/pages/page-search.js
@@ -185,18 +185,6 @@ style.textContent = /* css */`
margin-bottom: var(--space-md);
}
- page-search .listings-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: var(--space-md);
- }
-
- @media (min-width: 768px) {
- page-search .listings-grid {
- grid-template-columns: repeat(4, 1fr);
- }
- }
-
page-search .loading {
display: flex;
flex-direction: column;
diff --git a/js/components/search-box.js b/js/components/search-box.js
index 1ae51e5..8a59121 100644
--- a/js/components/search-box.js
+++ b/js/components/search-box.js
@@ -16,7 +16,7 @@ const RADIUS_OPTIONS = [5, 10, 20, 50, 100, 200];
class SearchBox extends HTMLElement {
static get observedAttributes() {
- return ['compact', 'category', 'subcategory', 'country', 'query'];
+ return ['category', 'subcategory', 'country', 'query'];
}
constructor() {
@@ -121,15 +121,9 @@ class SearchBox extends HTMLElement {
}
}
- get isCompact() {
- return this.hasAttribute('compact');
- }
-
render() {
- const compact = this.isCompact;
-
this.innerHTML = /* html */`
-