<!--
===========================================
LA LUXURY TRAVEL — DESTINATION PAGE TEMPLATE
===========================================
HOW TO USE:
1. Copy this entire block into a Squarespace Code Block
2. Replace everything in [SQUARE BRACKETS] with your content
3. For images, go to unsplash.com, find a photo, right-click the image
and copy the image URL. Paste it in place of [IMAGE_URL]
4. Duplicate the card blocks to add more cards
5. Duplicate the section block to add more destinations/regions
===========================================
-->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
<style>
.lalt-wrap { font-family: Montserrat, sans-serif; background: #F8F5F0; color: #2C2C2C; max-width: 1200px; margin: 0 auto; }
.lalt-hero { background: #2C2C2C; padding: 40px 40px; text-align: center; color: #F8F5F0; margin-bottom: 40px; }
.lalt-hero-label { font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: #D5C9BD; margin-bottom: 16px; }
.lalt-hero h1 { font-family: "Playfair Display", serif; font-size: 36px; font-weight: 400; line-height: 1.2; margin-bottom: 12px; }
.lalt-hero p { font-family: "Playfair Display", serif; font-style: italic; font-size: 13px; color: #D5C9BD; max-width: 500px; margin: 0 auto; line-height: 1.8; }
.lalt-section { padding: 0 40px 60px; }
.lalt-section-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #2E3A59; margin-bottom: 8px; }
.lalt-section h2 { font-family: "Playfair Display", serif; font-size: 32px; font-weight: 400; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid #D5C9BD; }
.lalt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lalt-card { background: #fff; border: 1px solid #D5C9BD; }
.lalt-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.lalt-card-body { padding: 20px; }
.lalt-card-tag { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #2E3A59; margin-bottom: 8px; }
.lalt-card h3 { font-family: "Playfair Display", serif; font-size: 18px; font-weight: 400; margin-bottom: 10px; }
.lalt-card p { font-size: 13px; line-height: 1.7; color: #2C2C2C; }
.lalt-divider { height: 1px; background: #D5C9BD; margin: 0 40px 60px; }
@media (max-width: 900px) { .lalt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lalt-section { padding: 0 20px 40px; } .lalt-hero { padding: 40px 20px; } .lalt-hero h1 { font-size: 28px; } .lalt-grid { grid-template-columns: 1fr; } .lalt-divider { margin: 0 20px 40px; } }
</style>
<div class="lalt-wrap">
<!-- ======= HERO ======= -->
<div class="lalt-hero">
<div class="lalt-hero-label">[DESTINATION TAGLINE — e.g. French Riviera and Provence]</div>
<h1>[HERO HEADLINE LINE 1]<br>[HERO HEADLINE LINE 2]</h1>
<p>[ONE SENTENCE DESCRIPTION — e.g. Sun-drenched coastlines, lavender fields, and the finest rose in the world.]</p>
</div>
<!-- ======= SECTION 1 ======= -->
<div class="lalt-section">
<div class="lalt-section-label">[COUNTRY — e.g. France]</div>
<h2>[CITY OR REGION — e.g. The French Riviera]</h2>
<div class="lalt-grid">
<!-- CARD 1 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY — e.g. Where to Stay / Where to Eat / Explore / Experience / Day Trip / Nature]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 2 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 3 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 4 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 5 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 6 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
</div>
</div>
<!-- ======= DIVIDER (keep between sections) ======= -->
<div class="lalt-divider"></div>
<!-- ======= SECTION 2 (duplicate and repeat for more regions) ======= -->
<div class="lalt-section">
<div class="lalt-section-label">[COUNTRY]</div>
<h2>[CITY OR REGION]</h2>
<div class="lalt-grid">
<!-- CARD 1 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 2 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 3 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 4 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 5 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
<!-- CARD 6 -->
<div class="lalt-card">
<img src="[IMAGE_URL]" alt="[IMAGE DESCRIPTION]">
<div class="lalt-card-body">
<div class="lalt-card-tag">[CATEGORY]</div>
<h3>[CARD TITLE]</h3>
<p>[2-3 SENTENCE DESCRIPTION]</p>
</div>
</div>
</div>
</div>
</div>