/*
 * The flag organism
 */

.o-flag {
	@include template(picture, content);
	@include vspacing(
		'padding-bottom' 1,
		'margin-bottom' 1
	);
	position: relative;

	&::before {
		@include paperBackground;
		@include vspacing(
			'margin-top' 1
		);
		content: "";
		position: absolute;
		z-index: -1;
		top: space(2);
		bottom: 0;
		left: 0;
		right: 0;
	}
}


.o-flag__main {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr;
	grid-template-areas: "content";

	@include mq(440) {
		@include contain;
	}
}


.o-flag__picture {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}


.o-flag__img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}


.o-flag__content {
	position: relative;
	align-self: flex-end;
	padding: space(8) space(3) space(3);

	@include mq(770) {
		padding: space(6);
	}

	&::before {
		content: '';
		display: block;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,1));
		opacity: 0.5;
	}
}


.o-flag__description {
	@include font-size(m);
	@include font-weight('bold');
	line-height: 1.33;
	position: relative;
	z-index: 1;
	max-width: space(40);
	margin-bottom: space(3);
	color: palette(neutral, 0);

	@include mq(770) {
		@include font-size(l);
	}
	@include mq(l) {
		@include font-size(xl);
	}
}


.o-flag__action {
	position: relative;
	z-index: 1;
}