@import url('https://fonts.googleapis.com/css2?family=Goudy Bookletter 1911:wght@400');
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400');

:root {
    --global-font-size: 16px;

    --title-font: Goudy Bookletter 1911, serif;
    --standard-font: Spectral, sans-serif;

    --primary-color: #004c43;

    --light-color: #f3f2ed;

    --emphasis-color: #feb615;

    --primary-shade-50: #defffd;
    --primary-shade-100: #b3fff6;
    --primary-shade-200: #86fef0;
    --primary-shade-300: #5afeea;
    --primary-shade-400: #3cfee4;
    --primary-shade-500: #30e5ca;
    --primary-shade-600: #21b29d;
    --primary-shade-700: #127f70;
    --primary-shade-800: #004d43;
    --primary-shade-900: #001b16;

    --emphasis-shade-50: #fff7db;
    --emphasis-shade-100: #ffe7ad;
    --emphasis-shade-200: #ffd77d;
    --emphasis-shade-300: #fec84b;
    --emphasis-shade-400: #feb81a;
    --emphasis-shade-500: #e59e01;
    --emphasis-shade-600: #b27b00;
    --emphasis-shade-700: #805800;
    --emphasis-shade-800: #4d3500;
    --emphasis-shade-900: #1c1100;
}


  /* ================================
   GLOBAL TITLE STYLING (THIS PAGE)
   ================================ */

/* Center any title/description block used on this page */
.bc-title-description-container {
  text-align: center !important;
}

.bc-title-description-container .bc-title-description-title,
.bc-title-description-container .bc-title-description-description {
  margin-left: auto;
  margin-right: auto;
  text-align: inherit !important;
}


/* ==========================================
   "DISCOVER OUR OTHER RESORTS" – FULL LAYOUT
   ========================================== */

/* Whole section wrapper */
.even-grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;                   /* space between resort cards */
  max-width: 80rem;
  margin: 4rem auto 3rem auto; /* center section on page */
}

/* Section heading inside that wrapper */
.even-grid-container > .bc-title-description-title {
  flex: 0 0 100%;              /* full width row */
  text-align: center !important;
  margin: 0 auto 2.5rem auto;  /* space below heading */
}

/* Each resort card (logo + text + button) */
.even-grid-image-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center !important;
  gap: 14px;                   /* space between logo, text, button */
  max-width: 300px;
  flex: 0 1 300px;             /* controls how many fit per row */
}

/* Logos – about 50% larger than the old 180px */
.even-grid-image-container img {
  width: 100%;
  max-width: 270px;            /* 180px * 1.5 */
  height: auto;
  object-fit: contain;
  display: block;
}

/* Text blocks in each card */
.even-grid-image-container > div,
.even-grid-image-container > div > div {
  width: 100%;
  text-align: center !important;
}

/* "Learn More" buttons under each logo */
.even-grid-image-container > a {
  align-self: center;
  width: auto !important;      /* override Tailwind w-full so button hugs text */
}


/* =======================
   RESPONSIVE ADJUSTMENTS
   ======================= */

@media (max-width: 1024px) {
  .even-grid-container {
    gap: 32px;
  }
  .even-grid-image-container {
    flex: 0 1 260px;
    max-width: 260px;
  }
  .even-grid-image-container img {
    max-width: 240px;
  }
}

@media (max-width: 768px) {
  .even-grid-container {
    gap: 24px;
  }
  .even-grid-image-container {
    flex: 0 1 240px;
    max-width: 240px;
  }
  .even-grid-image-container img {
    max-width: 220px;
  }
}

@media (max-width: 480px) {
  .even-grid-image-container {
    flex: 0 1 100%;
    max-width: 100%;
  }
  .even-grid-image-container img {
    max-width: 200px;
  }
}
/* Mobile: keep resort cards centered under the heading */
@media (max-width: 768px){
  .even-grid-container{
    justify-content: center !important;
  }

  .even-grid-image-container{
    flex: 0 1 100% !important;      /* one per row */
    max-width: 320px !important;    /* nice readable width */
    margin-left: auto !important;
    margin-right: auto !important;  /* center the card itself */
    text-align: center !important;
  }

  .even-grid-image-container img{
    margin-left: auto;
    margin-right: auto;             /* make sure logo is centered too */
  }
}