.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Adjust spacing here */
  width: 100%;
  max-width: 1000px; /* Or whatever your page width is */
  margin: 0 auto;
}

.oc-card {
  /* 25% width minus a bit of the gap so 4 fit perfectly */
  flex: 0 0 calc(25% - 15px); 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.oc-pfp {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #000;
  background: #eee; /* Placeholder color */
}

.oc-name {
  margin-top: 5px;
  font-family: monospace; /* Giving it that Zonelets vibe */
}

.search-wrapper {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 30px auto;
  text-align: center;
}

#ocSearch {
  width: 100%;
  padding: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}

/* Ensure the flex container still looks good when icons disappear */
.gallery-container {
  min-height: 200px; 
}