// @MEDIA

@media (prefers-color-scheme: dark) {
	body {
		background-color: $background-dark;
	}
	h3 {
		color: $text-prime-dark;
	}
	h4 {
		color: $text-third-dark;
	}
	h5 {
		color: $text-third-dark;
	}
	p {
		color: $text-prime-dark;
	}
	em {
		color: $text-third-dark;
	}
	.highlighter::after {
		background-color: $text-prime-dark;
	}
	p .highlighter::before {
		background-color: $text-underscore-dark;
	}
	.gallery::before {
		background: $card-first-dark;
	}
	.item img {
		box-shadow: 0 12px 32px -2px rgba(0,0,0, 0.5);
	}
}

@media (max-width: 1024px) {
	.flickity-prev-next-button {
		display: none!important;
	}
	.desktop {
		width: calc(0.9 * 1024px); height: calc(0.9 * 720px);
	}
}
@media (max-width: 960px) {
	.content {
		width: 100%;
		padding: 0 5% 5vh 5%;
		flex-direction: column;
	}
	.content h3 {
		width: 100%;
		margin: 0 0 5vh 0;
	}
	.content p {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	.gallery {
		margin-left: 0;

		&::before {
			width: 100%;
			margin-left: 0;
			border-radius: 0;
		}
	}
	.item::before {
		display: none;
	}
	.tablet {
		width: calc(0.8 * 960px); height: calc(0.8 * 720px);
	}
	.portrait {
		width: calc(0.8 * 576px); height: calc(0.8 *768px);
	}
	.phone {
		width: calc(0.8 * 375px); height: calc(0.8 * 667px);
	}
	.phoneLarge {
		width: calc(0.8 * 375px); height: calc(0.8 * 812px);
	}
	.desktop {
		width: calc(0.8 * 1024px); height: calc(0.8 * 720px);
	}
}
@media (max-width: 840px) {
	.tablet {
		width: calc(0.7 * 960px); height: calc(0.7 * 720px);
	}
	.portrait {
		width: calc(0.7 * 576px); height: calc(0.7 *768px);
	}
	.phone {
		width: calc(0.7 * 375px); height: calc(0.7 * 667px);
	}
	.phoneLarge {
		width: calc(0.7 * 375px); height: calc(0.7 * 812px);
	}
	.desktop {
		width: calc(0.7 * 1024px); height: calc(0.7 * 720px);
	}
}
@media (max-width: 720px) {
	.tablet {
		width: calc(0.6 * 960px); height: calc(0.6 * 720px);
	}
	.portrait {
		width: calc(0.6 * 576px); height: calc(0.6 *768px);
	}
	.phone {
		width: calc(0.6 * 375px); height: calc(0.6 * 667px);
	}
	.phoneLarge {
		width: calc(0.6 * 375px); height: calc(0.6 * 812px);
	}
	.desktop {
		width: calc(0.6 * 1024px); height: calc(0.6 * 720px);
	}
}
@media (max-width: 600px) {
	.tablet {
		width: calc(0.5 * 960px); height: calc(0.5 * 720px);
	}
	.portrait {
		width: calc(0.5 * 576px); height: calc(0.5 *768px);
	}
	.phone {
		width: calc(0.5 * 375px); height: calc(0.5 * 667px);
	}
	.phoneLarge {
		width: calc(0.5 * 375px); height: calc(0.5 * 812px);
	}
	.desktop {
		width: calc(0.5 * 1024px); height: calc(0.5 * 720px);
	}
}
@media (max-width: 480px) {
	.tablet {
		width: calc(0.4 * 960px); height: calc(0.4 * 720px);
	}
	.portrait {
		width: calc(0.5 * 576px); height: calc(0.5 *768px);
	}
	.phone {
		width: calc(0.5 * 375px); height: calc(0.5 * 667px);
	}
	.phoneLarge {
		width: calc(0.5 * 375px); height: calc(0.5 * 812px);
	}
	.desktop {
		width: calc(0.4 * 1024px); height: calc(0.4 * 720px);
	}
	.gallery::before {
		padding-bottom: 4rem;
	}
	.item {
		margin: 4rem 4rem 0 0;
	}
	h3 {
		font: 2.75rem/0.975 $header;
		letter-spacing: -1px;
	}
	h4 {
		font: 1rem/1.5 $body;
	}
	h5 {
		font: 1rem/1.5 $body;
	}
	p {
		font: 1rem/1.5 $body;
	}

}
@media (max-width: 380px) {
	.tablet {
		width: calc(0.35 * 960px); height: calc(0.35 * 720px);
	}
	.desktop {
		width: calc(0.35 * 1024px); height: calc(0.35 * 720px);
	}
}
@media (max-width: 320px) {
	.tablet {
		width: calc(0.3 * 960px); height: calc(0.3 * 720px);
	}
	.desktop {
		width: calc(0.3 * 1024px); height: calc(0.3 * 720px);
	}
}