/* General Container Styles */
.cards-container,
.category-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

@media screen and (min-width: 960px) {
  .cards-container,
  .category-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
}

/* Card Base Styles */
.card,
.category {
  width: 16.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.card-ttl,
.category__ttl {
  font-size: 1.75rem;
  font-weight: bold;
}

.card__txt,
.category__txt {
  color: var(--black-80);
  flex-grow: 1;
    overflow-y: auto;

}

/* Category-Specific Styles */
.category {
  justify-content: space-between; /* Ensures text and button stay apart */
  min-height: 18rem; /* Ensures consistent height */
  align-items: stretch; /* Stretches items to full height */
  border: 1px solid var(--black-80); /* Optional: adds a visible border */
}

.category__btn {
  align-self: flex-start;
  margin-top: auto; /* Pushes button to the bottom */
}

/* Personal Card (e.g., donation) */
.personal-card {
  justify-content: center;
  align-items: center;
  background: var(--pink-20);
}

.personal-card__img {
  width: 128px;
  border-radius: 50%;
}

.personal-card__txt {
  text-align: center;
}

.personal {
  box-shadow: 0px 5px 5px var(--green-10);
}
/* Product Card */

.product-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-card {
  background-color: var(--yellow-25);
  border-radius: 8px;
  height: 70vh;
  width: 20rem;
}

.product-card__price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.875rem;
}

.product-card__price__old {
  color: var(--red);
  text-decoration-line: line-through;
}

.product-card__price__new {
  font-weight: 600;
}

.product-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  object-fit: cover;
}

.product-card__txt {
  overflow-y: auto;
}

/* Heart Container (For Product) */
.heart-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  gap: 1rem;
}

/* Partners Card */
.partners-card {
  justify-content: start;
  background: var(--green-10);
  width: 20rem;
  height: 50vh;

}

.partners-card__img {
  width: 12.4rem;
  object-fit: scale-down;
  aspect-ratio: 2.6;
}