.wpc-payment-methods-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 80px; background-color: #f5f5f5; padding: 3rem 1rem; } .wpc-payment-methods-title { font-size: 2rem; text-align: center; font-weight: bold; } .wpc-payment-methods-cards { display: grid; grid-template-columns: 350px 350px 550px; justify-items: center; align-items: center; justify-content: center; gap: 30px; } .wpc-payment-methods-cards-transfer { width: 350px; } .wpc-payment-methods-cards-credit { width: 550px; } .wpc-payment-methods-cards-transfer, .wpc-payment-methods-cards-credit { position: relative; display: flex; justify-content: space-evenly; align-items: center; height: 80px; background-color: #fff; border: 1px solid #c9d0f0; border-radius: 12px; } .wpc-payment-methods-cards-transfer img, .wpc-payment-methods-cards-credit img { scale: .8; } .wpc-payment-methods-cards-credit::before { content: 'Cart\00F5 es de cr\00E9 dito'; position: absolute; width: max-content; top: -45px; font-size: 1.5rem; } .wpc-payment-methods-cards-credit-devider { width: 2px; background-color: #000; height: 75%; } .grid-area-pix img { height: 80px; } @media (width <=1279px) { .wpc-payment-methods-container { gap: 50px; } .wpc-payment-methods-title { font-size: 1.7rem; } .wpc-payment-methods-cards { display: grid; grid-template-columns: auto; grid-template-areas: "transfer pix" "credit credit" ; } .grid-area-transfer { grid-area: transfer; } .grid-area-pix { grid-area: pix; } .grid-area-credit { grid-area: credit; margin-top: 2rem; width: 630px; } .wpc-payment-methods-cards-transfer { width: 300px; } .wpc-payment-methods-cards-credit::before { top: -35px; font-size: 1.2rem } .wpc-payment-methods-cards-credit-devider { width: 1px; } } @media (width <=767px) { .wpc-payment-methods-container { gap: 30px; } .wpc-payment-methods-cards { grid-template-areas: "transfer" "pix" "credit" ; } .wpc-payment-methods-title { margin: 0 1rem; font-size: 1.5rem; } .wpc-payment-methods-cards { grid-template-columns: 1fr; gap: 20px; width: 100%; } .wpc-payment-methods-cards-credit::before { font-size: 1rem; top: -25px; } .wpc-payment-methods-cards-transfer, .wpc-payment-methods-cards-credit { height: 56px; width: 100%; } .wpc-payment-methods-cards-transfer img, .wpc-payment-methods-cards-credit img { scale: 1; } .grid-area-pix img { height: auto; } }