/*
 * assets/css/4square-checkout.css
 *
 * Controls the SIZE of the rail-logo PNG on the checkout page.
 * Loaded on both classic checkout and Blocks checkout.
 *
 * .foursquare-rails-collapsed -> the logo shown on the payment radio row.
 */


/* ==========================================================
   THE LOGO - on the payment option row.
   Change these numbers to resize it.
   ========================================================== */
.foursquare-rails-collapsed {
    display: block;                 /* logo sits on its own line */
    max-height: 120px;              /* DESKTOP SIZE */
    width: auto;                    /* width follows the height automatically */
    max-width: 100%;                /* never wider than its container */
    margin: 8px 0;                  /* small space above and below */
}

@media (max-width: 480px) {          /* on phones (screen 480px wide or less): */
    .foursquare-rails-collapsed {
        width: 100%;                 /* MOBILE SIZE: stretch to fill the
                                        full width of the checkout column */
        height: auto;                /* height follows the width automatically */
        max-height: none;            /* remove the height cap so it can grow
                                        to full width instead of staying tiny */
    }
}