/* General Styles */
.wookmark {
  position: relative;
  margin: 0 auto; /* Center the gallery on the page */
  max-width: calc(100% - 20px); /* Prevent the gallery from exceeding the screen width */
  padding: 10px; /* Add padding around the gallery */
  overflow: hidden; /* Prevent elements from overflowing the container */
}

.wookmarked {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  position: absolute;
  width: 250px; /* Fixed width for uniform grid items */
  height: 250px; /* Fixed height for uniform grid items */
  margin: 10px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px; /* Optional: Rounded corners for items */
  background-color: #fff; /* Optional: Background for uniform blocks */
  text-align: center; /* Ensure fallback centering */
}

/* Add hover effect (optional) */
.wookmarked:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Slightly elevate the item on hover */
  transform: translateY(-5px); /* Move the item slightly upward */
}

/* Image Styling */
.wookmarked img {
  width: 100%; /* Reduce image size */
  height: 100%; /* Keep proportional height */
  object-fit: contain; /* Ensure images fit inside without stretching or cropping */
  display: block;
  border-radius: 4px; /* Match the container's rounded corners */
}

/* Small Screens (Mobile, up to 480px) */
@media (max-width: 480px) {
  .wookmarked {
    width: calc(100% - 20px); /* Single-column layout for smaller screens */
    height: auto; /* Allow images to scale naturally */
    margin: 10px auto; /* Center items */
  }

  .wookmarked img {
    height: auto; /* Preserve aspect ratio for smaller screens */
    object-fit: contain; /* Avoid cropping for smaller screens */
  }
}

/* Medium Screens (Tablets, 481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .wookmarked {
    width: calc(50% - 20px); /* Two-column layout */
    height: auto;
  }

  .wookmarked img {
    height: auto; /* Ensure responsiveness */
  }
}

/* Large Screens (Desktops, 769px and above) */
@media (min-width: 769px) {
  .wookmarked {
    width: 250px; /* Fixed width for grid items */
    height: 250px; /* Fixed height for grid items */
    margin: 10px; /* Uniform spacing */
  }
}