body {
			font-family: "Roboto", sans-serif;
		}
		.container-home {
			display: flex;
			flex-flow: row;
			width: 100%;
			height: 100%;
		}

		.wrapper {
			display: grid;
			grid-template-columns: 20% 80%;
			width: 100%;
			height: 100%;

			.history {
				display: flex;
				flex-flow: column;
				width: 100%;
				height: 100%;
				position: relative;

				.card {
					display: flex;
					width: 100%;
					height: 100%;
					padding: 20px;
					border-radius: 10px;

					.card-body {
						display: flex;
						flex-flow: row;
						height: fit-content;
						margin-top: auto;
						margin-left: auto;
						border-radius: var(--border-radius);

						.extra-block {
							background-color: #0d0a42;
							padding: 1.5rem;
							border-radius: 20px;
							color: #ffffff;
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 23%;
							gap: 20px;

							h3 {
								font-size: 1.5rem;
								font-weight: 200;
								margin: 0;
								color: var(--yellow);
							}

							p {
								font-size: 1.2rem;
								margin: 0;
								color: var(--yellow);
							}

							a {
								font-size: 1.2rem;
								padding: 0.6rem 1.6rem;
								background-color: var(--light-purple);
								color: var(--purple);
								border-radius: 20px;
								text-align: center;
								text-decoration: none;
								font-weight: 500;
							}
						}
					}
				}

				.header {
					display: flex;
					height: min(10vh, 100px);
					width: 100%;
					align-items: center;
					background-color: var(--purple);
					justify-content: space-between;

					img {
						height: 100%;
						max-width: 50%;
					}

					h1 {
						width: max-content;
						color: var(--white);
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						font-size: 2rem;
						font-weight: 1000;
					}
				}

				.content-image {
					display: grid;
					grid-template-columns: 30% 70%;
					width: 100%;
					height: fit-content;
					padding: 20px;

					/* img {
						margin: 0 auto;
						align-self: center;
						width: 180px;
						border-radius: 52px;
					} */

					.profile-icon {
						margin: 0 auto;
						align-self: center;

						i {
							font-size: 9em;
							color: var(--purple);
						}
					}
				}

				.content {
					display: flex;
					width: 100%;
					padding: 20px;
					height: fit-content;
				}

				h1 {
					font-size: 2rem;
					color: var(--white);
				}
			}

			.profiles {
				display: flex;
				flex-flow: column;
				width: 100%;
				height: 100%;
				border-right: 1px solid var(--grey);

				.person {
					display: flex;
					flex-flow: column;
					width: 100%;
					height: 100%;
					align-items: center;
					justify-content: center;
					gap: 10px;

					/* img {
						width: 50%;
						border-radius: 52px;
					} */
					.profile-icon {
						margin: 0 auto;
						align-self: center;

						i {
							color: var(--purple);
						}
					}
					h2 {
						font-size: 1.2rem;
						color: var(--purple);
					}
				}
			}
		}

		@media screen and (max-width: 768px) {
			.container-home {
				flex-flow: column;
			}

			.wrapper {
				grid-template-columns: 1fr;
				grid-template-rows: 1fr 1fr;

				.profiles {
					padding-bottom: 20px;
					grid-row: 2;
					flex-flow: row;
					.person {
						img {
							border-radius: 30px;
						}
					}
				}

				.history {
					grid-row: 1;

					.content-image {
						grid-template-columns: 1fr;
						gap: 20px;
					}
					.card {
						flex-direction: column;
						.card-body {
							width: 100%;
							justify-content: center;
							.extra-block {
								flex-direction: column;
								height: auto;
								gap: 10px;
							}

							.extra-block h3 {
								font-size: 1.2rem;
							}

							.extra-block p {
								font-size: 1rem;
							}

							.extra-block a {
								font-size: 1rem;
								padding: 0.4rem 1.2rem;
							}
						}
					}

					.content-image {
					
					.profile-icon {
						margin: 0 auto;
						align-self: center;

						i {
							font-size: 2em;
						}
					}
				}
				}
			}
		}