/* Use the homepage hero's 1900px frame and content rails for the amenities. */
.gulf-hero-live #resort-amenities{
  --frame:min(100vw,1900px);
  --u:calc(var(--frame) / 1900);
  --m:calc(var(--frame) / 1750);
  --rail:calc((100vw - var(--frame)) / 2 + 170px);
  --cw:calc((100vw - 2 * var(--rail)) / 3.1307);
}
@media(max-width:1450px){
  .gulf-hero-live #resort-amenities{--rail:clamp(80px,8.947vw,170px)}
}
@media(max-width:900px){
  .gulf-hero-live #resort-amenities{--rail:24px}
}
@media(min-width:1000px){
  .gulf-hero-live #resort-amenities .amc__arrow--prev{left:calc(var(--rail) + 12px)}
  .gulf-hero-live #resort-amenities .amc__arrow--next{right:calc(var(--rail) + 12px)}
}
@media(max-width:999px){
  .gulf-hero-live #resort-amenities{
    --cw:calc(100vw - 2 * var(--rail));
    /* Keep readable type and badges as the single photograph fills the rails. */
    --k:calc(min(var(--cw),460px) / 459);
  }
}