<section
  id="cafe-contact-info"
  class="w-full py-20"
  data-component-type="Content"
>
  <div
    class="max-w-[1920px] mx-auto cafe-info-container px-[96px] grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
  >
    <div class="space-y-12 lg:pr-10">
      <div>
        <h3
          data-node="cafe_address_title"
          data-node-type="text"
          data-node-label="Cafe Address Title"
          data-node-default="Address"
          class="cafe-info-title"
        >
          {{cafe_address_title}}
        </h3>

        <p
          data-node="cafe_address_text"
          data-node-type="text"
          data-node-label="Cafe Address Text"
          data-node-default="2464 Royal Ln. Mesa, New Jersey 45463"
          class="cafe-info-text mt-2"
        >
          {{cafe_address_text}}
        </p>
      </div>

      <div>
        <h3
          data-node="cafe_phone_title"
          data-node-type="text"
          data-node-label="Cafe Phone Title"
          data-node-default="Phone"
          class="cafe-info-title"
        >
          {{cafe_phone_title}}
        </h3>

        <p
          data-node="cafe_phone_numbers"
          data-node-type="text"
          data-node-label="Cafe Phone Numbers"
          data-node-default="+1 (800) 234-65-78   +1 (800) 999-23-59"
          class="cafe-info-text mt-2"
        >
          {{cafe_phone_numbers}}
        </p>
      </div>

      <div>
        <h3
          data-node="cafe_hours_title"
          data-node-type="text"
          data-node-label="Opening Hours Title"
          data-node-default="Opening Hours"
          class="cafe-info-title"
        >
          {{cafe_hours_title}}
        </h3>

        <p
          data-node="cafe_hours_weekdays"
          data-node-type="text"
          data-node-label="Weekday Hours"
          data-node-default="<span class='cafe-info-hours-bold'>Monday – Friday</span> from 8am to 9pm"
          class="cafe-info-hours mt-2"
        >
          {{cafe_hours_weekdays}}
        </p>

        <p
          data-node="cafe_hours_saturday"
          data-node-type="text"
          data-node-label="Saturday Hours"
          data-node-default="<span class='cafe-info-hours-bold'>Saturday</span> from 9am to 4pm"
          class="cafe-info-hours"
        >
          {{cafe_hours_saturday}}
        </p>

        <p
          data-node="cafe_hours_sunday"
          data-node-type="text"
          data-node-label="Sunday Hours"
          data-node-default="<span class='cafe-info-hours-bold'>Sunday</span> from 9am to 4pm"
          class="cafe-info-hours"
        >
          {{cafe_hours_sunday}}
        </p>
      </div>
    </div>

    <div class="flex justify-center lg:justify-end">
      <img
        data-node="cafe_contact_image"
        data-node-type="file"
        data-node-label="Cafe Contact Image"
        data-node-default="../assets/contact-info/Picture.webp"
        src="{{cafe_contact_image}}"
        alt="Cafe Contact Image"
        class="cafe-contact-image"
      />
    </div>
  </div>
</section>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&family=Montserrat:wght@400;500&display=swap");

  #cafe-contact-info {
    background: white;
  }

  @media (max-width: 768px) {
    .cafe-info-container {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }

  .cafe-info-title {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 35.47px;
    line-height: 49.66px;
    color: #534931;
  }

  .cafe-info-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 29.56px;
    line-height: 47.29px;
    color: #5c5c5c;
  }

  .cafe-info-hours {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 26.6px;
    line-height: 42.56px;
    color: #5c5c5c;
  }

  .cafe-info-hours-bold {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 26.6px;
    color: #5c5c5c;
  }

  .cafe-contact-image {
    width: 842px;
    height: auto;
  }

  @media (max-width: 1024px) {
    .cafe-contact-image {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    .cafe-info-title {
      font-size: 28px;
    }

    .cafe-info-text {
      font-size: 20px;
      line-height: 32px;
    }

    .cafe-info-hours,
    .cafe-info-hours-bold {
      font-size: 20px;
      line-height: 32px;
    }
  }
</style>
