/* One panoramic pool image connects the four credentials in a single panel. */
#credentials{display:flow-root}
#credentials .credentials-grid.wrap{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:0;
  margin-top:28px;
  margin-bottom:0;
  padding:30px;
  border:1px solid #143e54;
  border-radius:26px;
  background:linear-gradient(110deg,#052b42f0 0%,#073650df 40%,#0b3a52c9 72%,#12384bc9 100%),url('/overflow-pool-palm-garden.webp') center 57%/cover;
  box-shadow:0 12px 34px #1037490b;
}
#credentials .credential{
  --credential-ink:#9bcaff;
  --credential-tint:#3f82be37;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  min-width:0;
  min-height:0;
  padding:0 25px;
  border:0;
  border-left:1px solid #d0e5ee2e;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#credentials .credential:first-child{border-left:0;padding-left:0}
#credentials .credential:last-child{padding-right:0}
#credentials .credential:nth-child(2){--credential-ink:#7ee2cf;--credential-tint:#2eaa9133}
#credentials .credential:nth-child(3){--credential-ink:#f5cf92;--credential-tint:#b98b4036}
#credentials .credential:nth-child(4){--credential-ink:#d7bbff;--credential-tint:#a17dc33b}
#credentials .credential>svg{
  box-sizing:border-box;
  display:block;
  flex:none;
  width:46px;
  height:46px;
  padding:11px;
  border:1px solid #ffffff15;
  border-radius:14px;
  color:var(--credential-ink);
  background:var(--credential-tint);
  stroke-width:1.7;
}
#credentials .credential>div{min-width:0}
#credentials .credential h3{
  margin:0 0 8px;
  max-width:20ch;
  color:#fff;
  font-size:16px;
  font-weight:550;
  line-height:1.3;
  letter-spacing:-.025em;
}
#credentials .credential p{
  margin:0;
  max-width:28ch;
  color:#c7dce7;
  font-size:11.5px;
  line-height:1.6;
}
@media(min-width:801px) and (max-width:1100px){
  #credentials .credentials-grid.wrap{padding:28px 24px}
  #credentials .credential{padding-inline:18px;gap:13px}
  #credentials .credential:first-child{padding-left:0}
  #credentials .credential:last-child{padding-right:0}
  #credentials .credential>svg{width:42px;height:42px;padding:10px;border-radius:13px}
  #credentials .credential h3{font-size:15px}
  #credentials .credential p{font-size:11px}
}
@media(max-width:800px){
  #credentials .credentials-grid.wrap{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:24px;
    padding:26px;
    border-radius:24px;
    background-position:center 55%;
  }
  #credentials .credential{gap:13px;padding:0 22px 23px 0;border-left:0}
  #credentials .credential:nth-child(even){padding-left:22px;padding-right:0;border-left:1px solid #d0e5ee2e}
  #credentials .credential:nth-child(n+3){padding-top:23px;padding-bottom:0;border-top:1px solid #d0e5ee2e}
  #credentials .credential>svg{width:42px;height:42px;padding:10px;border-radius:13px}
  #credentials .credential h3{font-size:15px;max-width:23ch}
  #credentials .credential p{font-size:11px;max-width:29ch}
}
@media(max-width:540px){
  #credentials .credentials-grid.wrap{margin-top:20px;padding:23px 20px;border-radius:22px}
  #credentials .credential{gap:11px;padding-right:17px;padding-bottom:21px}
  #credentials .credential:nth-child(even){padding-left:17px}
  #credentials .credential:nth-child(n+3){padding-top:21px;padding-bottom:0}
  #credentials .credential>svg{width:38px;height:38px;padding:9px;border-radius:11px}
  #credentials .credential h3{margin-bottom:6px;font-size:14px;line-height:1.3}
  #credentials .credential p{font-size:10.5px;line-height:1.5}
}
@media(max-width:360px){
  #credentials .credentials-grid.wrap{padding:21px 16px}
  #credentials .credential{padding-right:13px;gap:10px}
  #credentials .credential:nth-child(even){padding-left:13px}
  #credentials .credential h3{font-size:13px}
  #credentials .credential p{font-size:10px}
}