@media screen and (orientation: landscape) {
	#contentLayout {
		width: 100%;
		height: auto;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		font-size: 0vw;
		background-color: transparent;
	}
	
	.content-wrapper-single {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		overflow: hidden;
	}
	
	.content-wrapper-double {
		width: 50%;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		overflow: hidden;
	}

	.content-wrapper-double-left::before {
		content: '';
		width: 50%;
		height: 0.1vw;
		position: absolute;
		background-color: #00ff00;
		right: 0;
		top: 0;
	}
	.content-wrapper-double-left::after {
		content: '';
		width: 50%;
		height: 0.1vw;
		position: absolute;
		background-color: #00ff00;
		right: 0;
		bottom: 0;
	}

	.content-wrapper-double-right::before {
		content: '';
		width: 50%;
		height: 0.1vw;
		position: absolute;
		background-color: #00ff00;
		left: 0;
		top: 0;
	}
	.content-wrapper-double-right::after {
		content: '';
		width: 50%;
		height: 0.1vw;
		position: absolute;
		background-color: #00ff00;
		left: 0;
		bottom: 0;
	}
	
	
	.content {
		aspect-ratio: 16 / 9;
		width: auto;
		max-height: 40vh;
		position: relative;
		justify-content: center;
		background-color: rgba(17, 17, 17, 0.9);
		border: solid #00ff00 0.1vw;
		/* border-radius: 1vw; */ /* Need to figure out how to round border-slide-in-animation */
		box-sizing: border-box;
		margin-top: 3vh;
		margin-bottom: 3vh;
		text-align: center;
	}
	.content::before {
		content: '';
		width: 0.1vw;
		height: 4vh;
		position: absolute;
		top: -4vh;
		align-self: center;
		background-color: #00ff00;
		z-index: -1;
	}
	.content::after {
		content: '';
		width: 0.1vw;
		height: 4vh;
		position: absolute;
		bottom: -4vh;
		align-self: center;
		background-color: #00ff00;
		z-index: -1;
	}

	.content-intro-wrapper {
		width: auto;
		height: 40%;
		margin: 0vw 1vw 0vw 1vw;
	}

	.content-header {
		font-size: 2.5vw;
		margin: 0vw;
		padding-top: 1vw;
	}

	.content-description {
		font-size: 1vw;
		font-weight: 500;
		line-height: 2;
		margin: 0vw;
	}

	.content-display-container {
		width: auto;
		height: calc(60% - 1vw);
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		z-index: 1;
		overflow-y: scroll;
		scroll-behavior: smooth;
		margin: 0vw 1vw 0vw 1vw;
		padding: 1vw 0vw 1vw 0vw;
		border: solid #00ff00 0.1vw;
		box-sizing: border-box;
	}
	.content-display-container::-webkit-scrollbar {
		width: 0.5vw;
	}
	.content-display-container::-webkit-scrollbar-track {
		background-color: rgb(75, 75, 75);
	}
	.content-display-container::-webkit-scrollbar-thumb {
		background-color: rgb(242, 242, 242);
		border-radius: 50vw;
	}
	.content-display-container::-webkit-scrollbar-thumb:hover {
		background-color: gold;
	}

	.content-display-wrapper {
		width: 40%;
		height: auto;
	}

	.content-display-image, .content-display-video {
		width: 100%;
		height: auto;
		display: block;
		border: solid rgb(242,242,242) 0.1vw;
		border-radius: 1vw;
		box-sizing: border-box;
		z-index: 5;
	}
	.content-display-image:hover {
		border-color: #ff00ff;
		cursor: pointer;
	}

	.content-display-title {
		font-size: 1.25vw;
		font-weight: normal;
		margin: 0vw;
	}

	.content-display-description {
		font-size: 1vw;
		font-weight: normal;
		margin: 0vw;
	}
}