.museum-nav{display: flex;justify-content: space-between;}
.museum-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 7px;}

.museum-card {
  transition: box-shadow 0.2s, border-color 0.2s;width: 150px;height:150px;display: block;background: #fff;border-radius: 5px;align-items: center;margin: auto;margin-bottom: 10px;cursor: pointer;position: relative;}
.museum-card:hover {box-shadow: 0 8px 16px #0002}
.museum-card-title{font-weight: 700;    padding-left: 5px;}
.museum-card-title::first-letter {text-transform: uppercase;}

.museum-img-container {height: 150px;width: 150px;background: #fff;border-radius: 4px;display: flex;align-items: center;justify-content: center;margin: auto;}
.museum-img {   height: 150px;width: 150px;;object-fit: cover;background: #f1f1f1;}

.museum-info-container{height:150px;justify-content: center;width: 100%;position: absolute;z-index: 200;opacity: 0.85;bottom:0;background: rgb(0,0,0,0.7);align-content: center;position: absolute;
    width: 100%;
    color: white;
  font-size:14px;}
.museum-info-container:hover{opacity:0}
.museum-card-meta{ font-size:10px;; color: #f1f2f3;text-transform: uppercase;    padding-left: 5px;}

.museum-card-empty{display: block;padding: 10px;margin: 10px;background-color: #f0f0f0;color: #c1c1c1;text-decoration: none;}
.museum-city .museum-country{margin:0px !important;}

.filter-input { padding: 0.5rem; border-radius: 6px; border: 1px solid #e0e0e0; background: #f8f8fa; font-size: 1rem; outline: none; transition: border 0.2s; width: 220px; margin-top:10px; margin-bottom: 10px;}
.filterArtworkInput{display: inline-block;min-width: 36px;padding: 0.5em 0.9em;margin: 0 0.1em;border-radius: 7px;text-align: center;text-decoration: none;background: #f7f9fb;color: #222;border: 1px solid #dbe2ef;transition: background 0.18s, color 0.18s;cursor: pointer;margin-top: 10px;margin-bottom: 10px;margin-left: 5px;}
.filterArtworkInput:hover{background: #4a69bb;color: #fff;border-color: #4a69bb;}

@media (max-width: 900px) {
  .museum-img {   height: 150px;width: 150px;;object-fit: cover;background: #f1f1f1;}
  .museum-grid{grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
  .museum-card {transition: box-shadow 0.2s, border-color 0.2s;width: 150px;height:150px;display: block;background: #fff;border-radius: 5px;align-items: center;margin: auto;margin-bottom: 10px;cursor: pointer;position: relative;}
  .museum-img-container {height: 150px;width: 150px;background: #fff;border-radius: 5px;display: flex;align-items: center;justify-content: center;margin: auto;
}
}