/* Section "Why HK: International financial centre" (patterns/hk-financial-centre.php). */

.fin{position:relative;overflow:hidden;background:#110F34}
.fin__bg{position:absolute;left:0;right:0;bottom:0;height:min(100%,50vw);opacity:.35}
.fin__bg svg{width:100%;height:100%}
.fin::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#110F34 20%,rgba(17,15,52,.7));z-index:1}
.fin__intro{font-size:18px;color:#fff;max-width:62ch;margin-bottom:24px}
.fgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);border-radius:16px;overflow:hidden}
.fgrid li{background:rgba(17,15,52,.82);backdrop-filter:blur(6px);padding:30px 26px;min-height:130px;display:flex;align-items:flex-end;color:#fff;font-weight:800;font-stretch:80%;font-variation-settings:'wdth' 80;text-transform:uppercase;font-size:clamp(19px,1.7vw,24px);line-height:1.05;border-top:3px solid transparent;transition:border-color .2s}
.fgrid li:hover{border-top-color:var(--tide)}

@media (max-width:1180px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .fgrid li{min-height:0;padding:20px}
}