/* ====================== Component: Why Choose Us ====================== */
.why { background: var(--color-cream); }
.why__intro { margin-bottom: 40px; }
.why__grid { display: grid; gap: 26px; grid-template-columns: 1fr; }

.why-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-yellow);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  cursor: pointer;
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(24, 22, 20, 0.12); }

.why-card__media { height: 215px; overflow: hidden; }
.why-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.why-card:hover .why-card__media img { transform: scale(1.05); }

.why-card__body { padding: 28px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.why-card__title { font-size: 18px; line-height: 28px; letter-spacing: -0.18px; }
.why-card__text { margin-top: 12px; margin-bottom: 24px; font-size: 14px; line-height: 22.75px; color: var(--color-body); flex: 1; }

@media (min-width: 460px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: repeat(4, 1fr); }
}