/* EPM 3.5 section 2.2: separate groups, program width 60px, separation >= 4 x 60px. */
.bank-payment-links { container-type: inline-size; width: 100%; margin: 24px 0; color: #101a24; }
.bank-payment-layout { display: grid; grid-template-rows: auto 240px auto; justify-items: center; align-items: center; padding: 18px 8px; background: #fff; }
.bank-payment-cards, .bank-payment-programs { display: flex; justify-content: center; align-items: center; gap: 8px; }
.bank-payment-programs { flex-wrap: wrap; max-width: 100%; gap: 12px; }
.bank-payment-cards img { display: block; width: 46px; height: 29px; object-fit: contain; }
.bank-payment-bank { display: flex; align-items: center; justify-content: center; width: min(220px, 100%); min-height: 60px; }
.bank-payment-bank img { display: block; width: 210px; max-width: 100%; height: auto; }
.bank-payment-program { display: flex; align-items: center; justify-content: center; min-width: 60px; height: 44px; }
.bank-payment-program-logo { position: relative; display: block; width: var(--mark-width); height: 36px; overflow: hidden; }
.bank-payment-program-logo img { position: absolute; display: block; left: var(--source-left); top: var(--source-top); width: var(--source-width); height: var(--source-height); max-width: none; }
.bank-payment-links a:focus-visible { outline: 2px solid #101a24; outline-offset: 4px; }
@container (min-width: 390px) { .bank-payment-cards img { width: 60px; height: 38px; } }
@container (min-width: 1000px) {
  .bank-payment-layout { grid-template-columns: auto 240px auto; grid-template-rows: auto; justify-content: center; }
}

@container (max-width: 275px) {
  .bank-payment-layout { padding-inline: 4px; }
  .bank-payment-cards { gap: 4px; }
  .bank-payment-cards img { width: 37px; height: 23px; }
}

/* Align visible artwork, removing only unused image-canvas whitespace. Original artwork stays unchanged. */
.bank-payment-program[data-logo="visa-secure"] { --mark-width: 41.679px; --source-width: 41.679px; --source-height: 41.609px; --source-left: 0.000px; --source-top: -5.609px; }
.bank-payment-program[data-logo="mastercard-id-check"] { --mark-width: 52.856px; --source-width: 67.765px; --source-height: 50.795px; --source-left: -7.454px; --source-top: -7.454px; }
.bank-payment-program[data-logo="amex-safekey"] { --mark-width: 145.453px; --source-width: 158.532px; --source-height: 54.099px; --source-left: -8.521px; --source-top: -9.050px; }
.bank-payment-program[data-logo="dinacard-secure"] { --mark-width: 96.473px; --source-width: 141.872px; --source-height: 95.941px; --source-left: -22.759px; --source-top: -30.030px; }

/* Keep the complete Mastercard wordmark visible, including its baseline and antialiasing. */
.bank-payment-program[data-logo="mastercard-id-check"] .bank-payment-program-logo { overflow: visible; }