.school-selector .dynamic-content {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto the next line */
  justify-content: space-between; /* Spaces out items evenly */
}

@media screen and (max-width: 600px) {
  .school-selector .column {
    flex-basis: 100%!important; /* Takes full width on small screens */
    margin-bottom: 15px; /* Adds spacing between rows */
  }
}

@media screen and (max-width: 959px) and (min-width: 601px) {
  .school-selector .column {
    flex-basis: 49%!important; /* Adjusts to take roughly half the container's width */
    margin-bottom: 15px; /* Adds spacing between rows */
  }
}

/* Adjust this to better handle 5 columns in a row or to force the 5th to a new line based on container width */
.school-selector .column {
  flex: 1; /* Allows flexible growth but can be overridden by media queries */
  min-width: calc(20% - 30px); /* Adjusts based on container width, accounting for padding/margin */
  padding: 15px;
}

.school-selector .column img {
  cursor: pointer;
  width: 100%; /* Ensures image scales with the column */
  height: auto; /* Maintains aspect ratio */
}

.school-selector .autocomplete {
  width:300px;
  max-width:100%;
  margin:auto;
}
.school-selector .suggestions-container {
  position:absolute;
  border-top: none;
  z-index: 1000;
  width: calc(300px); /* Adjust based on the input field's border */
  max-width:100%;
  box-shadow: 0 0 4px rgba(0,0,0,0.16);
  margin-right:auto;
  margin-left:auto;
}

.school-selector .dynamic-content .column ul {
    list-style-type:none!important;
}
.school-selector .dynamic-content .column ul li::marker {
    display:none!important;
}
.school-selector input#schoolInput {
  margin:auto;
  width:300px;
  max-width:100%;
}
.school-selector .suggestion-item {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
}

.school-selector .suggestion-item:hover {
  background-color: #f2f2f2;
}