/* Marins hotel — amenities card (.essentials) responsive styling.
   Task: marins_amenities_responsive_component (dev-middle-0).
   Owned selectors only: .essentials, .essentials h2, .muted, .official.
   Plain CSS; no imports, assets, or URLs. Linked AFTER styles.css, so these
   rules supersede the base .essentials rules for the owned selectors.
   width stays auto: the card fills the gutter box (7vw sides) and max-width
   caps the content shell at 1240px without ever overflowing the viewport. */

/* Base / desktop (1440): card stays inside the 7vw gutters and never exceeds
   a 1240px content shell; 48px heading. */
.essentials{
  position:relative;
  z-index:2;
  max-width:1240px;
  margin:-1px 7% 130px;
  padding:76px 60px 25px;
  background:var(--paper);
  border-radius:18px;
  box-shadow:0 18px 40px #0611162e;
}
.essentials h2{
  font:400 clamp(32px,3.4vw,48px)/1.15 Georgia,serif;
}
.muted{
  font-size:22px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}
.official{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
  color:var(--muted);
  font-size:18px;
}
.official a{
  flex:0 1 auto;
  max-width:100%;
  overflow-wrap:break-word;
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
}

/* Tablet (768): inside 5% gutters with 40px horizontal padding, no overflow. */
@media (min-width:768px) and (max-width:1100px){
  .essentials{
    margin:-1px 5% 85px;
    padding-left:40px;
    padding-right:40px;
  }
}

/* Mobile (390): 20px outer gutters, 52/24/25 card padding, 31px heading,
   muted line-height >= 1.7, official link wraps, no horizontal overflow. */
@media (max-width:767px){
  .essentials{
    max-width:none;
    margin:60px 20px 85px;
    padding:52px 24px 25px;
    border-radius:16px;
  }
  .essentials h2{
    font-size:31px;
    line-height:1.22;
  }
  .muted{
    font-size:18px;
    line-height:1.9;
  }
  .official{
    display:block;
    font-size:16px;
  }
  .official a{
    display:block;
    margin-top:14px;
    overflow-wrap:anywhere;
  }
}