/* Your Custom CSS Goes here */

/* authentication error message class  */

/* Error message - initially hidden */
.error-message {
  opacity: 0;
  transform: translateY(-10px); /* Initially hidden above */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease; /* Animate opacity and position */
  max-height: 0; /* Start with no height */
  overflow: hidden;
}

/* When error message is visible */
.error-message.show {
  opacity: 1;
  transform: translateY(0); /* Slide down into view */
  max-height: 3rem; /* Adjust to the desired height of the error div */
}

/* Auth-submit button container */
.auth-submit {
  transition: transform 0.3s ease; /* Animate the button position */
}

.auth-submit.slide-down {
  transform: translateY(
    2.8rem
  ); /* Adjust this value based on error message height */
}

.auth-submit.slide-up {
  transform: translateY(0); /* Return to original position */
}

.delete-button,
.edit-button {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #666;
  color: white;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #e53e3e; /* Red */
}

.edit-button:hover {
  background-color: #3182ce; /* Blue */
}

.bg-gradient-to-t {
  background: linear-gradient(to top, black, transparent);
}

.group:hover .delete-button,
.group:hover .edit-button {
  visibility: visible;
  opacity: 1;
}

/* Hiding scrollbar  */
.scroll-container {
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

#display_media {
  transition: opacity 0.3s ease;
  opacity: 0;
}

#display_media:not(.hidden) {
  opacity: 1;
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  ); /* Adjust minmax as needed */
  gap: 16px; /* Space between cards */
}

.card {
  /* Optional: Add some styling for the card */
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

/* /// */
.media-spacing {
  padding: 1rem; /* Equivalent to p-4 */
}

@media (min-width: 768px) {
  .media-spacing {
    padding: 4rem; /* Equivalent to md:p-[4rem] */
  }
}