/* ------------------------------------------------------------
   Generic Feature / Step Grid
------------------------------------------------------------ */

.mwd-feature-section {
  position:relative;
  overflow:hidden;
}

.mwd-feature-section--light {
  background:
    linear-gradient(180deg, #DAD7C9 0%, #efeee9 65%, #EAE8E0 100%); 
}

.mwd-feature-section--dark {
  color:#fff;
  background:
    linear-gradient(rgba(8,12,17,.88), rgba(8,12,17,.88)),
    url("../images/bg/marbella-palms-dark.jpg") center center / cover no-repeat;
}
.mwd-feature-section--dark {
  color:#fff;
  background:
    linear-gradient(
      180deg,
      #0d0d0d 0%,
      #221E1A 55%,
      #221E1A 65%,
      #11110f 100%
    );
}

.mwd-feature-section .section-heading {
  margin-bottom:1rem;
}
.mwd-feature-section .eyebrow { margin: 0 auto 1rem !important;}

.mwd-feature-section .section-heading h2 {
  font-size:clamp(2rem,2.8vw,3.2rem);
}

.mwd-feature-section .section-heading p {
  max-width:550px;
}

.mwd-feature-section--dark .section-heading h2,
.mwd-feature-section--dark .mwd-feature h3 {
  color:#fff;
}

.mwd-feature-section--dark .section-heading p:not(.eyebrow),
.mwd-feature-section--dark .mwd-feature p {
  opacity:.7;
}


/* Grid */

.mwd-feature-grid {
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
}

.mwd-feature {
  position:relative;
  padding:2em 2.2em 2.2em;
  text-align:center;
}


/* Metallic vertical dividers */

.mwd-feature::after,
.mwd-feature:first-child::before,
.mwd-feature-grid::after {
  content:"";
  position:absolute;
  top:10%;
  width:2px;
  height:80%;
  pointer-events:none;
  opacity:.5;

  background:
    linear-gradient(
      90deg,
      rgba(70,55,20,.45) 0%,
      rgba(177,126,28,.95) 35%,
      rgba(234,190,78,1) 52%,
      rgba(255,236,164,.9) 68%,
      rgba(255,255,255,.15) 100%
    );

  -webkit-mask-image:linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image:linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.mwd-feature::after {
  right:0;
}

.mwd-feature:first-child::before {
  left:0;
  transform:scaleX(-1);
}

.mwd-feature:last-child::after {
  display:none;
}

.mwd-feature-grid::after {
  right:0;
}


/* Optional icon support */

.mwd-feature-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  margin-bottom:0.9rem;
  line-height:0;
}

.mwd-feature-icon img {
  display:block;
  width:58px;
  height:58px;
  object-fit:contain;
  filter:var(--mwd-filter-gold);
}

.mwd-feature-icon i {
  color:var(--mwd-gold);
  font-size:2.55rem;
  line-height:1;
}


/* Optional label support */

.mwd-feature-label {
  color:var(--mwd-gold-dark);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 .9em !important;
}

.mwd-feature h3 {
  color:#151515;
  font-size:clamp(1rem,1.4vw,1.2rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0;
}
.mwd-feature-section--dark .mwd-feature h3 { font-weight:400; }

.mwd-feature .accent-line {
  width:48px;
  margin:1.25em auto 1em;
}

.mwd-feature p:last-child {
  max-width:240px;
  margin:0 auto;
}


/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media only screen and (max-width:1200px) {

  .mwd-feature {
    padding-left:1.4em;
    padding-right:1.4em;
  }

  .mwd-feature p:last-child {
    font-size:.98rem;
  }

}

@media only screen and (max-width:950px) {

  .mwd-feature-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .mwd-feature {
    padding:2.4em 2em;
  }

  .mwd-feature::after,
  .mwd-feature:first-child::before,
  .mwd-feature-grid::after {
    display:none;
  }

  .mwd-feature {
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .mwd-feature:nth-child(odd) {
    border-right:1px solid rgba(0,0,0,.08);
  }

  .mwd-feature:last-child {
    border-bottom:0;
  }

  .mwd-feature-section--dark .mwd-feature {
    border-bottom-color:rgba(255,255,255,.12);
  }

  .mwd-feature-section--dark .mwd-feature:nth-child(odd) {
    border-right-color:rgba(255,255,255,.12);
  }


  /* Centre final item when there are 5 benefits */
  .mwd-feature:last-child {
    grid-column:1 / -1;
    max-width:420px;
    width:100%;
    justify-self:center;
    border-right:0 !important;
    border-bottom:0;
  }

}
@media only screen and (max-width:950px) and (min-width:601px) {

  .mwd-feature-grid {
    grid-template-columns:repeat(2, 1fr);
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
  }

  .mwd-feature {
    border:0 !important;
    padding:2.7em clamp(1.5em,4vw,3em);
  }

  /* soft divider between left and right columns only */
  .mwd-feature:nth-child(odd):not(:last-child)::after {
    content:"";
    display:block;
    position:absolute;
    top:24%;
    right:0;
    width:1px;
    height:52%;
    opacity:.38;
    pointer-events:none;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(177,126,28,.35) 18%,
        rgba(234,190,78,.75) 50%,
        rgba(177,126,28,.35) 82%,
        transparent 100%
      );
  }

  /* centre final item */
  .mwd-feature:last-child {
    grid-column:1 / -1;
    max-width:420px;
    width:100%;
    justify-self:center;
    margin-top:.6em;
    padding-top:3em;
  }

  /* small elegant separator above final item */
  .mwd-feature:last-child::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:150px;
    height:1px;
    transform:translateX(-50%);
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(234,190,78,.45) 50%,
        transparent 100%
      );
  }

}

@media only screen and (max-width:600px) {

  .mwd-feature-section .padding {
    padding-top:55px;
    padding-bottom:55px;
  }

  .mwd-feature-section .section-heading {
    margin-bottom:2.5em;
  }

  .mwd-feature-section .section-heading p {
    font-size:1rem;
  }

  .mwd-feature:not(:last-child) {
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .mwd-feature-section--dark .mwd-feature:not(:last-child) {
    border-bottom-color:rgba(255,255,255,.12);
  }


  .mwd-feature-grid {
    grid-template-columns:1fr;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }

  .mwd-feature {
    border:0 !important;
    padding:2.4em 0;
  }

  .mwd-feature p:last-child {
    max-width:300px;
  }

  .mwd-feature:not(:last-child)::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:190px;
    height:1px;
    transform:translateX(-50%);
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(234,190,78,.28) 50%,
        transparent 100%
      );
  }

}