{"id":2019831,"name":"Resort Quiz","masterVariationId":0,"modifications":[{"id":6330497,"selector":"#module-4-cta-04 .flex > div","type":"addHTML","value":"<div id=\"ABTastyElement5727041\">\n<div class=\"quiz-inline\">\n  <div class=\"quiz-divider\"></div>\n\n  <p class=\"quiz-copy\">\n    Not sure which resort is right for you?<br>\n    Find your perfect Sandals match.\n  </p>\n\n  <a\n    href=\"https://www.sandals.com/quiz\"\n    class=\"quiz-button\"\n    aria-label=\"Take the Sandals resort match quiz\"\n  >\n    TAKE THE QUIZ\n  </a>\n</div>\n</div>"},{"id":6330498,"selector":"","type":"addCSS","value":"/* =================================\n   YOUR ORIGINAL QUIZ CSS (unchanged)\n   ================================= */\n\n/* Wrapper (keep centered, add equal top/bottom padding for space) */\n.quiz-inline {\n  margin-top: 16px;\n  text-align: center;\n  padding-top: 14px;   /* equal top/bottom padding so nothing touches edges */\n  padding-bottom: 14px;\n}\n\n/* Divider (yours) */\n.quiz-divider {\n  width: 70%;\n  height: 1px;\n  background-color: #d1d5db;\n  margin: 20px auto 12px; /* keep your spacing */\n}\n\n/* Copy: keep each sentence on one line, centered, and responsive */\n.quiz-copy {\n  margin: 20px 0 12px;\n  font-weight: 600;\n  line-height: 1.35;\n\n  /* 🔑 Keep each sentence on a single line; <br> creates the two lines */\n  white-space: nowrap;\n\n  /* 🔑 Ensure the two lines are centered together */\n  display: inline-block;\n  text-align: center;\n\n  /* 🔑 Start close to your original, then gently scale down only when needed */\n  font-size: 15px;\n}\n\n/* Gentle, readable downsizing—only enough to prevent overflow */\n@media (max-width: 1024px) { .quiz-copy { font-size: 15px; } }\n@media (max-width: 900px)  { .quiz-copy { font-size: 14.8px; } }\n@media (max-width: 768px)  { .quiz-copy { font-size: 14.5px; } }\n@media (max-width: 640px)  { .quiz-copy { font-size: 14px; } }\n@media (max-width: 560px)  { .quiz-copy { font-size: 14px; } }\n@media (max-width: 480px)  { .quiz-copy { font-size: 13.8px; } }\n@media (max-width: 420px)  { .quiz-copy { font-size: 13.5px; } }\n@media (max-width: 380px)  { .quiz-copy { font-size: 13.2px; } }\n@media (max-width: 360px)  { .quiz-copy { font-size: 13px; } }\n\n/* Button (your existing style) */\n.quiz-button {\n  display: block;\n  background-color: #2356f6;\n  color: #ffffff;\n  padding: 6px 14px;\n  font-size: 14px;\n  font-weight: 700;\n  text-decoration: none !important;\n  border-radius: 20px;\n  text-align: center;\n  cursor: pointer;\n\n  width: 100%;\n  max-width: 160px;\n  margin: 0 auto;\n}\n\n/* Kill underline everywhere */\na.quiz-button,\na.quiz-button:hover,\na.quiz-button:focus,\na.quiz-button:visited {\n  text-decoration: none !important;\n}\n\n\n/* ==========================================\n   HEADER TWEAKS (tablet-only, per your ask)\n   - More top space\n   - Wider readable width\n   ========================================== */\n\n/* Applies only between mobile and desktop (tablet-ish range) */\n@media (min-width: 640px) and (max-width: 1200px) {\n  /* Target the top header inside the gray container */\n  .bg-gray-f1 h3[data-testid=\"heading-ui\"] {\n    /* More space above header so it isn't tight against the top */\n    margin-top: 1.75rem;           /* ~28px; adjust 1.5–2rem to taste */\n\n    /* Make the header block wider so it feels less stacked/narrow */\n    max-width: 26rem;              /* try 26–28rem; increase if you want wider */\n    margin-left: auto;\n    margin-right: auto;\n\n    /* Tiny side padding to avoid hugging edges on some tablets */\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n  }\n}\n"},{"id":6330499,"selector":"#module-3-cta-01","type":"hideCSS","value":"#module-3-cta-01"}],"_tagInfo":"2026/05/19 23:20:34 UTC"}