@layer components {
    ul.settings-payment-options {
        list-style-type: none;

        & li {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            justify-content: space-between;
            align-items: center;
            padding-block: var(--space-m);

            border-bottom: solid var(--size--border) var(--color--border);

            &:first-of-type {
                border-top: solid var(--size--border) var(--color--border);
            }

            & img {
                order: 1;
            }

            & div {
                order: 3;
                grid-column: span 2;
            }

            & a {
                order: 2;
            }

            & h3 {
                font-family: var(--font--title--family--xsmall);
                font-size: var(--font--title--size--xsmall);
                font-weight: var(--font--title--weight--xsmall);
                line-height: var(--font--title--line-height--xsmall);
                letter-spacing: var(--font--title--letter-spacing--xsmall);
                text-transform: var(--font--title--casing--xsmall);
            }

            & p {
                margin-bottom: 0;

                font-family: var(--font--caption--family--xsmall);
                font-size: var(--font--caption--size--xsmall);
                font-weight: var(--font--caption--weight--xsmall);
                line-height: var(--font--caption--line-height--xsmall);
                letter-spacing: var(--font--caption--letter-spacing--xsmall);
                text-transform: var(--font--caption--casing--xsmall);
            }
        }
    }

    @media (min-width: 600px) {
        ul.settings-payment-options {
            & li {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                & div { order: 2; }
                & a { order: 3; }
            }
        }
    }
}