/* Base card style definitions */
.card {
    border-radius: var(--border-radius);
    position: relative;
  
    background-size: var(--background-size);
    background-image: var(--background-image);
    background-color: var(--background-color);
    background-blend-mode: var(--background-blend-mode);
    background-repeat: var(--background-repeat);
    background-position: var(--background-position);
  }
  
  .card_content {
    display: var(--display);
    gap: var(--gap);
    flex-direction: var(--flex-direction);
    justify-content: var(--justify-content);
    align-items: var(--align-items);
  }
  
  .card a {
    z-index: 1;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    z-index: var(--overlay-z-index);
    opacity: var(--overlay-opacity, 0.9);
    border-radius: var(--overlay-border-radius);
    background-color: var(--overlay-background-color);
    background-blend-mode: var(--overlay-blend-mode, normal);
  }

  
  /* -------------------------------------------------------------------- */
  /* ------------------------ ABOUT PAGE CARDS ---------------------------- */
  /* ------------------------------------------------------------------- */
  .town_events .card_grid .card {
    --border-radius: 38px;
  
    color: var(--color_white);
    padding: 40px 45px;
    --background-size: cover;
    --background-blend-mode: multiply;
    --background-repeat: no-repeat;
    --background-position: center;
  }
  .town_events .card_grid .card.card_content {
    --display: flex;
    --flex-direction: column;
    --justify-content: start;
    --align-items: center;
    --gap: 30px;
  }
  
  .town_events .card h3 {
    font-size: 36px;
  }
  
  .town_events .card1 {
    --background-image: url(../../images/about_page/SmallCardBg1.webp);
    --background-color: #1471dc;
  }
  .town_events .card2 {
    --background-image: url(../../images/about_page/SmallCardBg2.webp);
    --background-color: #176e2d;
  }
  .town_events .card3 {
    --background-image: url(../../images/about_page/SmallCardBg3.webp);
    --background-color: #b10fab;
  }
  .town_events .card4 {
    --background-image: url(../../images/about_page/SmallCardBg4.webp);
    --background-color: #dc6014;
  }
  
  @media screen and (min-width: 641px) {
    .section_event_cards .card_content p {
      max-width: 80%;
    }
  }
  
  @media screen and (min-width: 769px) {
    .section_event_cards .card {
      padding-top: 60px;
      min-height: 560px;
    }
    .section_event_cards .card .card_title span:nth-child(1) {
      font-size: 20px;
    }
  
    .section_event_cards .card .card_title span:nth-child(3) {
      font-size: 24px;
    }
    .tag {
      height: 52px;
      font-size: 28px;
      top: -25px;
    }
  
    .section_event_cards .card1 .tag {
      width: 124px;
    }
  
    .section_event_cards .card2 .tag {
      width: 162px;
    }
  }
  
  /* ------- homepage card tag scaling ---------- */
  @media screen and (min-width: 1025px) and (max-width: 1199px) {
    .tag {
      height: 36px;
      top: -18px;
      font-size: 20px;
  
      transform: translateX(-50%);
      left: 50%;
    }
  
    .section_event_cards .card1 .tag {
      width: 103px;
    }
  
    .section_event_cards .card2 .tag {
      width: 129px;
    }
  }
  
  @media screen and (min-width: 1025px) {
    .stories_layout.card {
      --border-radius: 72px;
    }
    .section_event_cards .card {
      padding: 60px 45px 30px;
      min-height: 670px;
      --border-radius: 72px;
    }
    .section_event_cards .card .card_title {
      gap: 7px;
    }
  
    .section_event_cards .card .card_title span:nth-child(1),
    .section_event_cards .card .card_title span:nth-child(3) {
      font-size: 32px;
    }
    .section_event_cards .card_content p {
      max-width: 100%;
    }
  
    .town_events .card_grid .card {
      padding: 45px 40px;
    }
    .town_events .card_grid .card.card_content {
      --gap: 35px;
    }
  }
  
  @media screen and (min-width: 1200px) {
    .tag {
      top: 44px;
      --offset-x: -9px;
    }
    .section_event_cards .card {
      padding-bottom: 72px;
    }
    .section_event_cards .card .card_title {
      gap: 13px;
    }
    .section_event_cards .card1 .tag {
      left: var(--offset-x);
      transform: unset;
    }
  
    .section_event_cards .card2 .tag {
      right: var(--offset-x);
      transform: unset;
      left: unset;
    }
  }