div#gallery {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	&>div {
		display: flex;
		flex-direction: column;
		width: 32%;
	}
}

div.content h2 {
	text-align: center;
}

img.gallery-artwork {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 15px;
	cursor: pointer;
}

.hidden {
	display: none !important;
}

div#artist-info {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	background-color: #00000077;
	padding: 5rem;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	box-sizing: border-box;

	&>div {
		background-color: var(--contentBackground);
		border-radius: 10px;
		position: relative;
		overflow: auto;
		width: 100%;
		height: 100%;
		padding: 3rem;
	}

	* {
		box-sizing: border-box;
	}

	h2 {
		color: var(--darkAccent);
	}

	#close {
		margin: 0;
		position: fixed;
		top: calc(5rem + 10px);
		right: calc(5rem + 10px);
		cursor: pointer;
	}

	div.info {
		display: flex;
		flex-direction: row;
	}

	img.pfp {
		width: 500px;
		height: 500px;
		aspect-ratio: 1/1;
		border-radius: 10px;
		margin-right: 3rem;
	}

	.socials img {
		width: 77px;
		aspect-ratio: 1/1;
	}

	.artworks {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		&>div {
			width: 49%;
		}

		img {
			margin-bottom: 15px;
			width: 100%;
		}
	}
}

@media only screen and (orientation: portrait) {
	div#artist-info {
		padding: 1rem;

		img.pfp {
			width: 100%;
			height: auto;
		}

		div.info {
			flex-direction: column;
		}

		#close {
			top: calc(1rem + 15px);
			right: calc(1rem + 15px);
		}
		
		.artworks {
			flex-direction: column;
			&>div {
				width: 100%;;
			}
		}
	}
}