education.scss

#education-page {
	h3 {
		&.big {
			font-size: 30px;
		}
	}
	.title-banner {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		height: 20vw;
		min-height: 250px;
		background-image: url("/assets/images/popularization_banner.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		h2 {
			color: white;
			font-size: 2.5em;
			margin: 40px;
			text-shadow: 0 0 6px #0003;
		}
	}
	.special-announcement {
		background-color: $yellow_2;
		.page-contents-center {
			padding: 0 20px;
			@include flex-center;
			p {
				color: $dark_3;
				font-size: 20px;
				font-weight: 600;
				margin: 0;
				padding: 40px 0;
			}
		}
	}

	.edu-section-title {
		color: $blue_2;
		margin: 40px auto;
		display: flex;
		align-items: center;
		white-space: nowrap;
		gap: 15px;
		&::after {
			content: "";
			display: block;
			flex: 1;
			border: 1px solid;
		}
	}

	.edu-themes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
		font-family: monospace;
		padding: 40px 0;
		.edu-theme {
			display: grid;
			grid-template-columns: auto 1fr;
			h3 {
				color: $blue_2;
				grid-row: 1;
				margin: 0;
				padding: 10px;
				display: flex;
				align-items: center;
			}
			img {
				width: 100%;
				grid-row: 1 / span 2;
			}
			p {
				text-align: justify;
				grid-row: 2;
				margin: 0;
				padding: 10px 30px 0 10px;
			}
		}
	}

	.edu-articles {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin: 20px auto;
		article.edu-article {
			display: grid;
			grid-template-columns: auto 1fr auto;
			gap: 10px 30px;

			.edu-art-image {
				padding: 20px;
				background-color: black;
				grid-column: 1;
				grid-row: 1 / span 3;
				@include flex-center;
				width: 150px;
				height: 150px;
				overflow: hidden;
				border-radius: 100%;
				img {
					max-width: 100%;
					max-height: 400px;
				}
			}

			.edu-art-title {
				grid-column: 2 / span 3;
				color: $light_2;
				margin: 0;
				padding: 10px;
			}

			.edu-art-subtitle {
				grid-column: 2 / span 3;
				margin: 10px;
				color: $medium_grey;
			}

			.edu-art-description {
				grid-column: 2;
				text-align: justify;
				margin: 10px;
				ul {
					list-style-type: unset;
					margin-left: 30px;
				}
			}

			.edu-art-carousel {
				grid-column: 3;
				width: 30vw;
				max-width: 500px;
				.image-carousel {
					width: 100%;
					height: 20vw;
					max-height: 400px;
					img {
						width: 100%;
					}
				}
			}

			.edu-art-details {
				grid-column: 1 / span 3;
			}

			@media screen and (max-width: 1050px) {
				grid-template-columns: auto 1fr;
				.edu-art-title {
					grid-column: 2;
				}
				.edu-art-image {
					grid-row: 1 / span 2;
				}
				.edu-art-carousel {
					width: 100%;
					max-width: unset;
					grid-column: 1 / span 2;
					grid-row: 3;
					.image-carousel {
						height: 40vw;
						max-height: 400px;
					}
				}
				.edu-art-subtitle {
					grid-column: 2;
					grid-row: 2;
				}

				.edu-art-description {
					grid-column: 1 / span 2;
				}

				.edu-art-details {
					grid-column: 1 / span 2;
				}
			}

			@media screen and (max-width: $screen_l) {
				.edu-art-title {
					display: flex;
					align-items: center;
				}

				.edu-art-subtitle {
					grid-column: 1 / span 2;
				}
				.edu-art-image {
					width: 100px;
					height: 100px;
					grid-row: 1;
				}
				// .edu-art-carousel {
				// 	grid-column: 1 / span 2;
				// }
			}
		}

		article.placeholder {
			display: grid;
			grid-template-columns: 200px auto;
			grid-template-rows: 100px 100px 200px;
			gap: 10px;
			margin: 30px;
			* {
				background-color: $light_0;
				flex: 1;
				&:first-child {
					// image
					grid-row: 1 / span 2;
				}
				&:last-child {
					grid-column: 1 / span 2;
				}
			}
		}
	}

	@media screen and (max-width: 1200px) {
		.edu-themes {
			grid-template-columns: 1fr;
			gap: 30px;
			padding: 0;
		}
	}

	@media screen and (max-width: $screen_s) {
		.edu-themes {
			.edu-theme {
				img {
					max-width: 150px;
					height: auto;
					grid-row: 1;
				}
				p {
					grid-row: 2;
					grid-column: 1 / span 2;
					padding: 20px 10px 30px 10px;
				}
			}
		}
	}
}