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;

				h2 {
					font-size: 18px;
					color: $light_2;
					margin: 5px 0;
				}

				.details-list {
					.detail {
						display: flex;
						gap: 20px;
						justify-content: space-between;
						padding: 6px 0;
						border-bottom: 1px solid $light_0;

						label {
							font-weight: 600;
							color: $dark_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;
				// }
			}
		}
	}

	@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;
				}
			}
		}
	}
}