.oa-location-explorer {
	position: relative;
	overflow: hidden;
	background: var(--oa-threes-black);
	clip-path: inset(0 0 0 0);
	.bg-vector{
		position: absolute;
		bottom: 0;
		left: 0;
		min-width: 100%;
		opacity: 0.01;
		z-index: 0;
	}
	.section-inner{
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-gap: var(--oa-gutter-xlarge);
		padding: var(--oa-gutter-xlarge);
		margin: auto;
		max-width: var(--oa-max-width);
		.content-container{
			display: flex;
			flex-direction: column;
			gap: var(--oa-gutter-medium);
			.heading-container{
				.heading{

				}
				.copy{

				}
			}
			.icons-container{
				display: grid;
				.icon-container{
					grid-area: 1 / 1 / 2 / 2;
					opacity: 0;
					transition: 0.6s;
					height: 50px;
					.icon{
						height: 100%;
						width: auto;
					}
					&.active{
						opacity: 1;
					}
				}
			}
			.locations-container{
				display: flex;
				flex-direction: column;
				gap: 5px;
				.location{
					.location-heading{
						margin: 0;
						color: var(--oa-threes-white);
						opacity: 0.4;
						cursor: pointer;
						&:hover{
							opacity: 1;
						}
					}
					.location-inner{
						display: grid;
						grid-template-rows: 0fr;
						transition: 0.3s;
						.spaces-container{
							overflow: hidden;
							opacity: 0;
							transition: 0.3s;
							.eyebrow{
								color: var(--oa-threes-white);
								margin-bottom: 5px;
							}
							.space{
								margin-inline: 20px;
								.space-heading{
									margin: 0;
									color: var(--oa-threes-white);
									cursor: pointer;
									opacity: 0.4;
									&:hover{
										opacity: 1;
									}
								}
								.space-inner{
									display: none;
									grid-template-rows: 0fr;
									transition: 0.3s 0s;
									.space-swiper{
										overflow: hidden;
										position: relative;
										opacity: 0;
										transition: 0.3s 0s;
										.swiper-wrapper{
											padding-bottom: 10px;
											.swiper-slide{
												height: 0;
												padding-bottom: 56.25%;
												overflow: hidden;
												img{
													position: absolute;
													top: 50%;
													left: 50%;
													transform: translate(-50%, -50%);
													min-width: 100%;
													min-height: 100%;
													width: 100%;
													object-fit: cover;
												}
											}
										}
										.space-swiper-pagination{
											position: absolute;
											width: 100%;
											height: 30px;
											bottom: 10px;
											left: 0;
											z-index: 1;
											display: flex;
											justify-content: center;
											align-items: center;
											filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
											.swiper-pagination-bullet{
												border: 1px solid var(--oa-threes-white);
												background: transparent;
												opacity: 1;
												transition: 0.3s;
												height: 10px;
												width: 10px;
												&.swiper-pagination-bullet-active{
													background: var(--oa-threes-white);
												}
											}
										}
									}
								}
								&.active{
									.space-heading{
										opacity: 1;
									}
									.space-inner{
										grid-template-rows: 1fr;
										opacity: 1;
										transition: 0.3s 0s;
										.space-swiper{
											opacity: 1;
											transition: 0.3s 0.3s;
										}
									}
								}
							}
						}
					}
					&.active{
						.location-heading{
							opacity: 1;
						}
						.location-inner{
							grid-template-rows: 1fr;
							transition: 0.3s;
							.spaces-container{
								opacity: 1;
								transition: 0.3s;
								transition-delay: 0.3s;
							}
						}
					}
				}
			}
		}
		.gallery-container{
			position: relative;
			.space-gallery{
				position: absolute;
				inset: 0;
				display: grid;
				grid-gap: 20px;
				opacity: 0;
				transition: 0.6s;
				.img-container{
					overflow: hidden;
					position: relative;
					width: 100%;
					height: 100%;
					margin: 0;
					img{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						min-width: 100%;
						min-height: 100%;
						width: 100%;
						object-fit: cover;
					}
				}
				&.active{
					opacity: 1;
				}
				&[data-layout="layout-1"]{
					grid-template-areas: "a";
					grid-template-columns: 1fr;
					grid-template-rows: 1fr;
					.img-container:nth-child(1){ grid-area: a; }
				}
				&[data-layout="layout-2-rows"]{
					grid-template-areas: "a" "b";
					grid-template-columns: 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
				}
				&[data-layout="layout-2-cols"]{
					grid-template-areas: "a b";
					grid-template-columns: 1fr 1fr;
					grid-template-rows: 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
				}
				&[data-layout="layout-3-left"]{
					grid-template-areas: "a b" "a c";
					grid-template-columns: 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
					.img-container:nth-child(3){ grid-area: c; }
				}
				&[data-layout="layout-3-top"]{
					grid-template-areas: "a a" "b c";
					grid-template-columns: 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
					.img-container:nth-child(3){ grid-area: c; }
				}
				&[data-layout="layout-4"]{
					grid-template-areas: "a b" "c d";
					grid-template-columns: 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
					.img-container:nth-child(3){ grid-area: c; }
					.img-container:nth-child(4){ grid-area: d; }
				}
				&[data-layout="layout-5-tall-first"]{
					grid-template-areas: "a b c" "a d e";
					grid-template-columns: 1fr 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
					.img-container:nth-child(3){ grid-area: c; }
					.img-container:nth-child(4){ grid-area: d; }
					.img-container:nth-child(5){ grid-area: e; }
				}
				&[data-layout="layout-5-wide-first"]{
					grid-template-areas: "a a b" "c d e";
					grid-template-columns: 1fr 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
					.img-container:nth-child(3){ grid-area: c; }
					.img-container:nth-child(4){ grid-area: d; }
					.img-container:nth-child(5){ grid-area: e; }
				}
				&[data-layout="layout-6"]{
					grid-template-areas: "a b c" "d e f";
					grid-template-columns: 1fr 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					.img-container:nth-child(1){ grid-area: a; }
					.img-container:nth-child(2){ grid-area: b; }
					.img-container:nth-child(3){ grid-area: c; }
					.img-container:nth-child(4){ grid-area: d; }
					.img-container:nth-child(5){ grid-area: e; }
					.img-container:nth-child(6){ grid-area: f; }
				}
			}
		}
	}
	@media only screen and (max-width: 1024px){
		.section-inner{
			display: block;
			.content-container{
				.locations-container{
					.location{
						.location-inner{
							.spaces-container{
								.space{
									.space-inner{
										display: grid;
									}
								}
							}
						}
					}
				}
			}
			.gallery-container{
				display: none;
			}
		}
	}
	@media only screen and (max-width: 767px){
		.section-inner{
			padding: var(--oa-gutter-medium) 20px;
		}
	}
}