/* ===============================
   WRAPPER & TITLE
================================ */
.fb-wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 60px 20px;
}

.fb-title {
  text-align: center;
   font-size: 50px;
  font-weight: 800;
  color: #2b2e4a;
}

.fb-title span {
  color: #e63946;
}

/* ===============================
   MASONRY GRID (NO GAPS)
================================ */
.fb-grid {
  column-count: 4;
  column-gap: 20px;
}

/* ===============================
   CARD BASE
================================ */
.fb-card {
  display: inline-block; /* REQUIRED for columns */
  width: 100%;
  margin-bottom: 20px;
  break-inside: avoid; /* Prevent cut-off */
  -webkit-column-break-inside: avoid;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #9fb3ad;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ===============================
   HEIGHT VARIANTS
================================ */
.fb-card.small {
  height: 160px;
}

.fb-card.medium {
  height: 240px;
}

.fb-card.tall {
  height: 320px;
}

/* ===============================
   IMAGE
================================ */
.fb-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===============================
   TEXT
================================ */
.fb-card span {
  position: relative;
  z-index: 2;
  font-size: 20px;
  padding: 15px;
  text-align: center;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
  .fb-grid {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .fb-grid {
    column-count: 1;
  }
}