.website-gallery {
  padding-top: max(20px, 8vh);
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 50vh;
}

.hidden {
  display: none !important;
}

.searchbar {
  padding-left: 5vw;
}

#gallery-search {
  margin-top: 3vh;
  padding: 15px 20px 15px 50px;
  width: 40vw;
  font-size: clamp(1.1rem, 1vw, 1.8rem);
  font-weight: 500;
  border-radius: 1vw;
  border: 1.5px solid rgba(28, 64, 115, 0.1);
  outline: none;
  background-color: rgb(242, 243, 245);

  background-image: url("images/search.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 18px center;

  color: rgba(28, 64, 115, 0.5);
}

#gallery-search::placeholder {
  color: rgba(28, 64, 115, 0.5);
  transition: color 0.5s;
}

#gallery-search:focus::placeholder {
  color: rgba(82, 143, 228, 0.8);
}

#gallery-search:focus {
  color: rgba(82, 143, 228, 0.8);
}

#no-results {
  text-align: center;
  color: rgb(120, 130, 150);
  font-size: clamp(1.1rem, 1.2vw, 1.6rem);
  padding: 6vh 0;
}

.gallery-grid {
  padding: 5vh 5vw 10vh 5vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  justify-content: start;
}

.display {
  background-color: rgb(242, 243, 245);
  padding: clamp(24px, 4vw, 40px);
  width: 22vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preview-image {
  height: 90%;
  width: 90%;
  margin-bottom: 10px;
  border-radius: 5px;
}

.display-info {
  width: 90%;
  margin-top: 5px;
  text-align: left;
}

.title {
  font-family: "Zalando Sans Expanded", Arial;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
  margin-bottom: 0px;
  transition: color 0.15s;
}

.title:hover {
  color: rgb(97, 148, 220);
}

.title:active {
  color: black;
}

.description {
  margin: 0px;
  font-size: clamp(1rem, 1.2vw, 2rem);
}