@import '../../../styles/mixins';

.bundleSummary {
	&_row {
		@include grid-row;
		display: flex;

		@include media-md-down {
			flex-direction: column;
		}

	}
	&_content,
	&_imageContainer {
		@include grid-item;
	}
	&_content {
		@include media-md-up {
			@include column-width(2);
		}
		@include media-xl-up {
			@include column-width(3);
		}
	}
	&_imageContainer {
		@include media-md-up {
			@include column-width(2);
		}
		@include media-xl-up {
			@include grid-offset(2);
		}
	}
	&_title {
		@include title-1;
		
		&--hidden {
			@extend %sr-only;
		}
	}
	&_description {
		margin: 0;
	}
	&_title:not(&--hidden) + &_description {
		margin-top: 10px;
	}
	&_image {
		@include fit;
		width: 100%;
		height: 100%;
		
		@include media-md-up {
			@include fit(contain, left);
			max-height: 350px;
		}	
	}
	&_buttons {
		text-align: center;
		margin-top: 30px;
		margin-bottom: 52px;

		@include media-md-up {
			text-align: left;
			margin-top: 40px;
			margin-bottom: 0;
		}
	}
}