/*
 * 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;
}

@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;
	}
}