.vista-tiles{position:relative;--tile-bg:#F0F2F5;--tile-open-bg:#ffffff;--tile-title:#163A66;--tile-num:#E6EBF1;--tile-active:#163A66}
.vista-tiles__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}

.vista-tiles__item{background:var(--tile-bg);border-radius:20px;padding:24px 28px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.vista-tiles__item.is-open{background:var(--tile-open-bg);box-shadow:0 12px 40px rgba(0,0,0,.12)}

.vista-tiles__head{display:flex;align-items:center;gap:20px;cursor:pointer;outline:none}
.vista-tiles__head:focus-visible{outline:2px solid #163A66;outline-offset:3px;border-radius:12px}
.vista-tiles__num{font-size:120px;line-height:1;font-weight:800;color:var(--tile-num)}
.vista-tiles__title{font-weight:800;font-size:32px;color:var(--tile-title)}
.vista-tiles__item.is-open .vista-tiles__num{color:var(--tile-active)}
.vista-tiles__item.is-open .vista-tiles__title{color:var(--tile-active)}

.vista-tiles__content{overflow:hidden;transition:max-height .35s ease, opacity .25s ease;margin-top:16px}
.vista-tiles__content[hidden]{display:block;max-height:0;opacity:0}
.vista-tiles__content:not([hidden]){max-height:800px;opacity:1}
.vista-tiles__body{color:#163A66;font-size:18px}

@media (max-width: 900px){
  .vista-tiles__grid{grid-template-columns:1fr}
  .vista-tiles__num{font-size:96px}
  .vista-tiles__title{font-size:26px}
}