homepage.scss

#home-page {
	display: flex;
	flex-direction: column;
	.section-title {
		padding: 10px;
		margin: 0;
		color: $light_2;
	}
	.page-header {
		.philo-bubbles {
			@include flex-center;
			flex-wrap: wrap;
			gap: 40px;
			@media screen and (max-width: $screen_m) {
				gap: 20px;
			}
			margin: 30px 20px;
			li {
				border-radius: 100%;
				@include flex-center;
				background-color: $light_0;
				* {
					color: $medium_grey;
				}
				width: 100px;
				height: 100px;
				@media screen and (max-width: $screen_s) {
					width: 75px;
					height: 75px;
					* {
						font-size: 12px;
					}
				}
				&:first-child {
					background-color: $medium_grey;
					* {
						color: white;
					}
				}
				&:last-child {
					background-color: $dark_1;
					* {
						color: $light_1;
					}
				}
			}
		}
	}

	.poles {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30px;
		padding: 100px 0;
		.theme-card {
			display: flex;
			flex-direction: column;
			width: 100%;
			cursor: pointer;
			.card-img {
				width: 100%;
				height: 240px;
				overflow: hidden;
				@include flex-center-col;
				position: relative;
				img {
					position: absolute;
					max-width: 100%;
					height: 100%;
					padding: 10px;
				}
			}
			.card-title {
				h2 {
					margin: 0;
					text-align: center;
					padding: 10px 20px;
					color: $blue_2;
					display: block;
					background-color: white;
				}
			}
			.card-description {
				flex: 1;
				padding: 30px 20px;
				p {
					margin: 0;
					color: $blue_2;
					text-align: center;
				}
			}
			transition: transform 0.3s;
			&:hover {
				transform: scale(1.03);
			}
		}
	}

	.kuadrado-values {
		background-image: url("/assets/images/wallpaper_binary_light.png");
		padding: 100px 0 120px;
		*:not(a, blue) {
			color: $light_0;
		}
		h2 {
			@include flex-center;
			margin: 0 auto 60px;
			width: 120px;
			height: 120px;
			background-image: url("/assets/images/wallpaper_binary.png");
			border-radius: 100%;
			color: $blue_3;
		}
		ul.values-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px;
			li {
				background-image: url("/assets/images/wallpaper_binary.png");
				padding: 30px 20px 40px;
				h3 {
					text-align: center;
				}
				p {
					text-align: justify;
				}
			}
		}
	}

	@media screen and (max-width: $screen_l) {
		.poles {
			grid-template-columns: 1fr;
			gap: 40px;
			.theme-card {
				.card-img {
					height: 300px;
					img {
						min-width: unset;
						height: 100%;
					}
				}
				.card-title {
					h2 {
						padding: 5px 20px;
					}
				}
				.card-description {
					padding: 20px 30px;
				}
				transition: transform 0.3s;
				&:hover {
					transform: none;
				}
			}
		}

		.kuadrado-values {
			ul.values-list {
				grid-template-columns: 1fr;
			}
		}
	}
	@media screen and (max-width: $page_contents_center_width) {
		.poles {
			padding: 20px;
		}
		.articles-displayer {
			padding: 0;
		}
	}
}