:root {
  --bg: #fff9f9;
  --title-color: #121212;
  --cat-text: #fff9f9;
  --label-bg: #0267B1;
  --card-w: 424px;
  --card-h: 467px;
  --gap: 22px;
  --row-gap: 52px;
  --label-h: 65px;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: 'Manrope', sans-serif;
  color: var(--title-color);
}

/* Heading */
.heading {
  font-family: 'Domine', serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--title-color);
  text-align: center;
  padding: 20px;
}

/* Grid — 3 columns default */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-bottom: var(--row-gap);
  padding: 0 20px;
  max-width: 100%;
}

/* Card wrapper — force fixed width, override Bootstrap */
.grid > a,
.grid > .card {
  flex: 0 0 var(--card-w) !important;
  max-width: var(--card-w) !important;
  width: var(--card-w) !important;
}

/* Card */
.grid > a > .card,
.grid > .card {
  width: var(--card-w) !important;
  max-width: var(--card-w) !important;
  height: var(--card-h);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--accent-grey);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  border: none !important;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
  display: block;
}

.grid > a:hover .card-image,
.grid > .card:hover .card-image {
  transform: scale(1.05);
}

/* Category label */
.category-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--label-h);
  background: var(--label-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.category-text {
  font-family: 'Domine', serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--cat-text);
  text-align: center;
  padding: 0 20px;
}

/* ── Responsive ─────────────────────────────────────── */

/* 2 columns */
@media (max-width: 1340px) {
  .grid > a,
  .grid > .card {
    flex: 0 0 calc(50% - var(--gap)) !important;
    max-width: calc(50% - var(--gap)) !important;
    width: calc(50% - var(--gap)) !important;
  }

  .grid > a > .card,
  .grid > .card {
    width: 100% !important;
    max-width: 100% !important;
    height: 380px;
  }

  .heading { font-size: 36px; }
  .category-text { font-size: 20px; }
}

/* 1 column — mobile */
@media (max-width: 600px) {
  .grid > a,
  .grid > .card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .grid > a > .card,
  .grid > .card {
    width: 100% !important;
    max-width: 100% !important;
    height: 320px;
  }

  .heading { font-size: 28px; padding: 16px; }
  .category-text { font-size: 18px; }
}