/* {{{ PAYMENTS }}} */
.payments {background-color: #fff; padding-inline: var(--mx-section); border-radius: 0 0 var(--br-section) var(--br-section); margin: 0; overflow: hidden;}
.payments .container {max-width: var(--container-max);}
.payments .wrapper {display: flex; align-items: center; justify-content: center; gap: 30px;  background-color: var(--_c-sky-lght); padding: 1rem; border-radius: 40px; margin-bottom: 1.125rem; transition: var(--trans-6);}
.payments img {flex-shrink: 1;}

/* {{{ FOOTER }}} */
footer {padding-block: 1.125rem; position: relative; background-color: var(--c-dark); margin-inline: 0;}
footer::before,
footer::after {position: absolute; bottom: 100%; width: 1rem; height: 1rem; background-color: var(--c-dark); z-index: -1; content: '';}
footer::before {left: 0;}
footer::after {right: 0;}
footer .container {max-width: var(--container-max);}
footer .wrapper {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
footer p {color: #fff;}
footer ul {display: flex; align-items: center; gap: 1rem;}
footer li a {font-size: var(--fs-xs, 14px); color: #fff;}
footer li a:hover {text-decoration: underline;}

@media only screen and (max-width: 767px) {
    .payments .wrapper {flex-wrap: wrap; gap: 20px;}
}

@media only screen and (max-width: 475px) {
    footer {padding: 0.75rem;}
    footer ul {gap: 0.625rem;}
}