/*
 * MARK: full width layouts
 */
.full-width-layouts-block {
	background-color: #fff;
	position: relative;
	left: 50%;
	margin-left: -50vw;
	padding: 48px 0.5rem;
	width: 100vw;
	@media (min-width: 769px) {
		padding: 80px 0.5rem;
	}

	&.bg-color-gray {
		background-color: #f5f5f5;
	}

	&.bg-color-blue {
		background-color: var(--dan-blue);

		.full-width-layout-header,
		.full-width-layout-subheader,
		.full-width-layout-body {
			color: #fff;
		}

		.full-width-layout-button {
			border: 1px solid #fff;
		}

		.full-width-image img,
		.full-width-image-grid img {
			box-shadow: 0 0 0 1px rgb(255, 255, 255, 0.25);
		}
	}

	.full-width-layout-container {
		display: grid;
		align-items: center;
		margin: 0 auto;
		width: 100%;
	}

	.full-width-content {
		padding: 1rem;
		@media (min-width: 993px) {
			padding: 1rem 1rem 1rem 2rem;
		}
	}

	.full-width-layout-header {
		margin: 1rem 0 0;
	}

	.full-width-layout-subheader {
		font-weight: 600;
		margin: 0.75rem 0 1.5rem
	}

	.full-width-layout-button {
		color: #fff;
		text-decoration: none;
		background-color: var(--dan-red);
		display: inline-block;
		padding: 1rem 2rem;
		transition: background 0.3s ease;

		&:hover {
			background-color: var(--dan-red-dark);
			transition: background 0.15s ease;
		}
	}

	/* basic */
	.full-width-image {
		padding: 1rem;
		@media (max-width: 768px) {
			position: relative;
			z-index: 1;
			margin: 0 1rem;
			padding: 35% 0;
		}

		img {
			@media (max-width: 768px) {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}

	/* photo grid */
	.full-width-image-grid {
		display: grid;
		gap: 1rem;
		padding: 1rem;
		min-height: 500px;

		.grid-image {
			position: relative;
			z-index: 1;

			img {
			  position: absolute;
			  top: 0;
			  left: 0;
			  z-index: 2;
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  object-position: center;
			}
		}

		&.image-count-4 {
			grid-template-rows: calc(40% - 0.5rem) calc(20% - 0.5rem) calc(40% - 0.5rem);
			grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);

			.grid-image:nth-child(1) {
				grid-row: 1 / 3;
			}

			.grid-image:nth-child(4) {
				grid-row: 2 / 4;
			}
		}

		&.image-count-3 {
			grid-template-rows: calc(60% - 0.5rem) calc(40% - 0.5rem);
			grid-template-columns: calc(55% - 0.5rem) calc(45% - 0.5rem);

			.grid-image:nth-child(1) {
				grid-row: 1 / 3;
			}
		}

		&.image-count-2 {
			grid-template-rows: calc(100% - 0.5rem);
			grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
		}

		&.image-count-1 {
			grid-template-rows: calc(100% - 0.5rem);
			grid-template-columns: calc(100% - 0.5rem);;
		}
	}

	/* full bg photo */
	.full-width-bg-photo {

		img {
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 2;
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		  object-position: center;
		}
	}

	&.layout-photo_basic .full-width-layout-container {
		grid-template-columns: 100%;
		max-width: 932px;
		@media (min-width: 769px) {
			grid-template-columns: 55% 45%;
		}
	}

	&.layout-photo_grid .full-width-layout-container {
		grid-template-columns: 100%;
		max-width: 1200px;
		@media (min-width: 769px) {
			grid-template-columns: 55% 45%;
		}
	}

	&.layout-photo_full {
		position: relative;
		z-index: 1;

		&::after {
			background-color: var(--dan-blue-dark);
			opacity: 0.75;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			@media (max-width: 768px) {
				content: "";
			}
		}

		.full-width-layout-container {
			grid-template-columns: 100%;
			max-width: 932px;
			@media (min-width: 769px) {
				grid-template-columns: 54% 46%;
			}
		}

		.full-width-content {
			position: relative;
			z-index: 3;
			padding-top: 6%;
			@media (min-width: 769px) {
				padding-top: unset;
			}
		}
	}

	/* right */
	&.photo-right {

		&.layout-photo_basic .full-width-layout-container {
			grid-template-columns: 100%;
			@media (min-width: 769px) {
				grid-template-columns: 45% 55%;
			}
		}

		&.layout-photo_grid .full-width-layout-container {
			grid-template-columns: 100%;
			@media (min-width: 769px) {
				grid-template-columns: 45% 55%;
			}
		}

		&.layout-photo_full .full-width-layout-container {
			grid-template-columns: 100%;
			@media (min-width: 769px) {
				grid-template-columns: 46% 54%;
			}
		}

		.full-width-content {
			@media (min-width: 769px) {
				order: -1;
			}
			@media (min-width: 993px) {
				padding: 1rem 2rem 1rem 1rem;
			}
		}
	}

	&.font-color-white {

		.full-width-layout-header,
		.full-width-layout-subheader,
		.full-width-layout-body {
			color: #fff;
		}

		.full-width-layout-button {
			border: 1px solid #fff;
		}
	}
}