/* =====================================================================
   BX3 AJAKAN - foto lebar (12:5) dengan kartu krem yang menumpang di sudut kiri bawahnya:
   judul + kalimat + satu tombol. Berbeda dari hero (teks di atas foto) supaya penutup halaman
   tidak mengulang pola pembuka. Tablet: kartu lebih lebar. HP: foto 4:3, kartu di bawahnya.
   ===================================================================== */

.bx3.bx3-cta{--bx3-max:var(--bx3-wide);--bx3-lap:clamp(96px,10vw,180px);display:block;background:var(--bx3-white);padding:var(--bx3-sec-y) var(--bx3-pad-x) clamp(72px,7.4vw,136px)}
.bx3 .bx3-cta__in{max-width:var(--bx3-max);margin:0 auto}
.bx3 .bx3-cta__img{aspect-ratio:12/5;border-radius:var(--bx3-r);isolation:isolate}
.bx3 .bx3-cta__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:min(46%,620px);margin:calc(var(--bx3-lap) * -1) 0 0 clamp(24px,5.5vw,96px);padding:clamp(32px,3.4vw,60px);background:var(--bx3-cream);border-radius:var(--bx3-r)}
.bx3.bx3-cta--cream{background:var(--bx3-cream)}
.bx3.bx3-cta--cream .bx3-cta__card{background:var(--bx3-white)}
.bx3.bx3-cta--noimg .bx3-cta__card{margin:0 auto;width:min(100%,720px);align-items:center;text-align:center}
.bx3 .bx3-cta__head{display:flex;flex-direction:column;align-items:inherit}
.bx3 .bx3-cta__card .bx3-text{max-width:24em;text-wrap:pretty}
.bx3 .bx3-cta__card a.bx3-btn[href]{margin-top:clamp(24px,2.2vw,36px)}

@media (max-width:1024px){
  .bx3 .bx3-cta__img{aspect-ratio:2/1}
  .bx3 .bx3-cta__card{width:min(72%,620px)}
}
@media (max-width:767px){
  .bx3.bx3-cta{--bx3-lap:56px}
  .bx3 .bx3-cta__img{aspect-ratio:4/3}
  .bx3 .bx3-cta__card{width:auto;margin:calc(var(--bx3-lap) * -1) 12px 0}
}