/* =========================================================
   DESTINATION GRID
========================================================= */

.surfcamp-destination-grid-section{
  background:transparent;
  padding:clamp(32px,4vw,60px) 0;
}
 
.surfcamp-destination-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
 
@media(max-width:1100px){
  .surfcamp-destination-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
 
@media(max-width:620px){
  .surfcamp-destination-grid{
    grid-template-columns:1fr;
  }
}
 
.surfcamp-destination-card{
  position:relative;
  min-height:320px;
  border-radius:28px 28px 32px 22px;
  overflow:hidden;
  background:#f3f7f8;
  box-shadow:0 2px 12px rgba(15,111,143,.04);
  transition:transform .22s ease,box-shadow .22s ease;

  isolation:isolate;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.surfcamp-destination-card__link{
  position:relative;
  display:flex;
  width:100%;
  height:100%;
  min-height:320px;
  overflow:hidden;
  color:#ffffff;
  text-decoration:none;

  border-radius:inherit;
  isolation:isolate;
  transform:translateZ(0);
}

.surfcamp-destination-card__link img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .45s ease;
  backface-visibility:hidden;

  border-radius:inherit;
  clip-path:inset(0 round 28px 28px 32px 22px);
}

.surfcamp-destination-card__overlay{
  position:absolute;
  inset:0;
  border-radius:inherit;
  clip-path:inset(0 round 28px 28px 32px 22px);
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(10,80,104,.36) 48%,
    rgba(10,80,104,.82) 100%
  );
}
 
.surfcamp-destination-card__content{
  position:relative;
  z-index:2;
  align-self:flex-end;
  width:100%;
  padding:24px;
}
 
.surfcamp-destination-card__label{
  display:inline-flex;
  align-items:center;
  margin-bottom:12px;
  color:rgba(255,255,255,.82);
  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:.14em;
  text-transform:uppercase;
}
 
.surfcamp-destination-card__label::before{
  content:"\f57d";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  margin-right:8px;
  opacity:.75;
}
 
.surfcamp-destination-card h3{
  margin:0 0 16px;
  color:#ffffff;
  font:900 28px/1.08 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:-.03em;
}
 
.surfcamp-destination-card__button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 15px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--surfcamp-grid-primary-light),
    var(--surfcamp-grid-primary-dark)
  );
  color:#ffffff;
  font:900 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  box-shadow:0 10px 22px rgba(14,116,144,.32);
}
 
.surfcamp-destination-card__button i{
  font-size:12px;
  transition:transform .2s ease;
}
 
.surfcamp-destination-card:hover .surfcamp-destination-card__button i{
  transform:translateX(4px);
}

 .surfcamp-destination-card:hover img{
  transform:scale(1.05);
	 }