// Grid layout. .ppcp-r-settings-block.ppcp--grid > .ppcp--content { --block-separator-gap: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; @media screen and (max-width: 767px) { grid-template-columns: repeat(2, 1fr); } @media screen and (max-width: 480px) { grid-template-columns: 1fr; } } // Theming & visual styles. .ppcp-r-settings-block__payment-methods { .ppcp-r-settings-block { display: flex; align-items: flex-start; border: 1px solid $color-gray-300; border-radius: var(--container-border-radius); padding: 16px; min-height: 200px; .ppcp--method-inner { display: flex; flex-direction: column; height: 100%; } .ppcp--method-title-wrapper { display: flex; align-items: center; margin: 0 0 8px 0; gap: 12px; } .ppcp--method-description { p { @include font(13, 20, 400); margin: 0; color: $color-text-tertiary; } margin: 0 0 12px 0; } .ppcp--method-title { @include font(13, 20, 500); color: $color-black; display: block; } .ppcp--method-settings { padding: 0; transition: 0.2s ease-out transform; transform: rotate(0deg); zoom: 1.005; &:hover { transform: rotate(45deg); } } .ppcp--method-icon { width: 30px; height: 30px; } button.is-secondary { @include small-button; } .ppcp--method-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } } }