Template:LocationsLanding.css

.search__dropdown {

 position: relative;
 display: inline-block;

}

/* Style for the search bar */ .search__bar {

 width: 100%;
 padding: 8px;
 padding-right: 20px;
 box-sizing: border-box;

}

.clear__btn {

   position: absolute;
   top: 50%;
   right: 5px;
   transform: translateY(-50%);
   cursor: pointer;
   font-weight: bold;

}

/* Style for the dropdown content */ .dropdown__content {

 display: none;
 position: absolute;
 z-index: 1;
 border: 1px solid #ccc;
 max-height: 200px;
 overflow-y: auto;
 width: 100%;
 background-color: #fff;
 flex-direction: column;

}

/* Style for individual items in the dropdown */ .dropdown__item {

 padding: 8px;
 cursor: pointer;
 border-bottom: 1px solid #ccc;

}

/* Highlight the selected item */ .dropdown__item:hover {

 background-color: #e7e5e5;

}

.location__search { display: flex; gap: 1rem; }

.location__search > div { display: flex; flex-direction: column; }

.location__search input, .location__search select { height: 100%; }

/* LIST */ .locations__container { display: grid;

   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;

}

.location__item { display: grid;

   grid-template-columns: 1fr;
   align-content: space-between;
   gap: 0.5rem;
   position: relative;
   text-align: center;

}

.location__text { display: flex;

   justify-content: space-between;
   gap: 0.5rem;

}

.location__title { font-size: 1.1rem;

   font-weight: bold

}

.location__item img { max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; }

.location__item .flag { display: flex; gap: 0.3rem; }