/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

$mobile-padding: 1rem;
$tablet-padding: 1.5rem;
$desktop-padding: 2rem;

/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.wp-block-embed-rentle-shop-block {
	padding: 2rem 0;

	&.no-padding {
		padding: 0;
	}

	&.small-padding {
		padding: $mobile-padding 0;

		@media (min-width: 576px) {
			padding: $tablet-padding 0;
		}

		@media (min-width: 1200px) {
			padding: $desktop-padding 0;
		}
	}

	&.medium-padding {
		padding: $mobile-padding * 1.5 0;

		@media (min-width: 576px) {
			padding: $tablet-padding * 1.5 0;
		}

		@media (min-width: 1200px) {
			padding: $desktop-padding * 1.5 0;
		}
	}

	&.large-padding {
		padding: $mobile-padding * 2.5 0;

		@media (min-width: 576px) {
			padding: $tablet-padding * 2.5 0;
		}

		@media (min-width: 1200px) {
			padding: $desktop-padding * 2.5 0;
		}
	}

	> iframe {
		border: none;
	}
}