#supervisor {
	width: 100%;
	background-color: #ffffff;
	padding-block: 62px 80px;

	@media (max-width: 768px) {
		padding: 79px 16px 80px;
	}

	.supervisor-box {
		width: 100%;
		border: 1px solid #cccccc;
		border-radius: 12px;
		background: #ffffff;
		padding: 40px;

		@media (max-width: 768px) {
			padding: 20px;
		}

		@media (max-width: 360px) {
			padding: 4vw;
		}

		.supervisor-intro {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;

			@media (max-width: 768px) {
				display: grid;
				grid-template-columns: min-content;
				gap: 8px;
			}

			picture {
				width: 40%;

				@media (max-width: 768px) {
					grid-area: 1/1/3/2;
      		width: 120px;
				}
			}

			.introduction {
				width: calc(60% - 2.4rem);
				display: flex;
				flex-direction: column;
				gap: 2.4rem;
	
				@media (max-width: 768px) {
					display: contents;
				}
	
				.name {
					font-size: 2rem;
					font-weight: bold;
	
					@media (max-width: 768px) {
						align-self: initial;
						font-size: 1.6rem;
						grid-area: 1/2/3/3;
						white-space: nowrap;
					}

					@media (max-width: 360px) {
						font-size: 4.26666667vw;
						width: calc(100% - 4vw);
					}
				}

				.career {
					font-size: 1.6rem;
					line-height: 1.8em;

					@media (max-width: 768px) {
						grid-area: 3/1/4/3;
					}

					@media (max-width: 360px) {
						font-size: 4.26666667vw;
						width: calc(100% - 4vw);
					}
				}

				.roles {
					display: flex;
					flex-direction: column;
					list-style: disc;
					margin-left: 1.6em;
					font-size: 1.4rem;
					line-height: 160%;

					@media (max-width: 768px) {
						grid-area: 4/1/5/3;
					}

					li {
						@media (max-width: 360px) {
							font-size: 3.73333333vw;
							width: calc(100% - 4vw);
						}
					}

				}
			}
		}
	}
}