/* @import './colors.css';

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
}
 
.container .item {
  padding: 0.5rem; 
}

.container .item:hover {
  position: relative;
  top: -4px;
  left: -4px;
  box-shadow: 8px 8px 0px var(--orange);
} */


@import './colors.css';

/* Default styling for desktop */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
}

.container .item {
  padding: 0.5rem;
}

.container .item:hover {
  position: relative;
  top: -4px;
  left: -4px;
  box-shadow: 8px 8px 0px var(--orange);
}

/* Styling for mobile devices */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack items vertically on mobile */
    gap: 0.5rem; /* Reduce gap for mobile */
    margin: 0.5rem; /* Reduce margin for mobile */
  }

  .container .item {
    padding: 0.25rem; /* Adjust padding for mobile */
  }

  .container .item:hover {
    top: -2px;
    left: -2px;
    box-shadow: 4px 4px 0px var(--orange); /* Adjust shadow for mobile */
  }
}

/* Load More... */
#load_more {
  text-decoration: none;
  color: var(--brown);
  padding: 1rem;
  margin-bottom: 2rem;
  border: 2px solid var(--orange);
  cursor: pointer;
  border-radius: 20%;
}

#load_more:hover {
  color: var(--light);
  background-color: var(--orange);
}
#load_more{
    padding:1rem;
    ;
  }
#button_container{
  display: flex;
  justify-content: center;
}