@import "../../definitions";

$Standard-text-max-width: 760px;

.Standard {
	background:transparent;
	
	.fpmain, .fr-view {
		width: 100%;
		max-width: $Standard-text-max-width;
	}

	&__layout {
		display: flex;
		flex-direction: column;
		gap: $s30;

		@include responsive-md {
			flex-direction: row;
			align-items: flex-start;
			gap: $s40;
		}

		&--right {
			@include responsive-md {
				flex-direction: row-reverse;
				// Pack toward the left so the image sits next to the text
				// instead of against the container’s right edge
				justify-content: flex-end;

				.Standard__content {
					flex: 0 1 $Standard-text-max-width;
					max-width: $Standard-text-max-width;
				}
			}
		}

		.fpmain, .fr-view {
			max-width: none;
		}‰
	}

	&__image {
		flex: 0 0 auto;
		width: 100%;

		@include responsive-md {
			flex: 0 0 40%;
			max-width: 40%;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	&__content {
		flex: 1 1 auto;
		min-width: 0;
	}

	&__title {
		margin-top: 0;
	}
}