.category {
	width: 25rem;
	height: 22rem;
}

.title {
	height: 22rem;
}

.subCategory {
	width: 25rem;
}

.content {
	grid-column: 2;
	height: calc(100vh - 3.5rem - 22rem);

	.team {
		position: relative;
		.slogan {
			width: 100%;
			height: 25rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 4rem;
			background-color: #777;

			h2 {
				font-size: 2.6rem;
				color: #fff;
				font-weight: bold;
			}
		}

		/* team 페이지 영역  */
		section {
			position: absolute;
			top: 0%;
			left: 50%;
			transform: translate(-50%, 0%);
			padding: 5rem 5rem 0;
			width: 100%;
			/* height: 100%; */
			max-width: 75rem;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}

.right {
	width: 25rem;
	grid-column: 3;
	background-color: #bbb;

	.thumbnail {
		height: calc(100% - 22rem);
		min-height: 22rem;
	}

	img {
		object-position: center;
	}
}

/* 1600px이하 레이아웃  */
@media screen and (max-width: 1600px) {
	.content {
		grid-column: 2;
		height: calc(100vh - 12.5rem - 22rem);
	}
}

@media screen and (max-width: 1280px) {
	.content {
		grid-column: 1;

		.team {
			.slogan {
				padding: 3rem;
				align-items: flex-start;
			}

			.team {
				section {
					padding: 6rem 5rem 0;
				}
			}
		}
	}

	.right {
		grid-column: 2;
	}

	@media (pointer: coarse) {
		.content {
			min-height: 50vmin;
		}
	}
}

@media screen and (max-width: 1024px) {
	.content {
		.team {
			.slogan {
				padding: 2rem;
				align-items: flex-start;

				h2 {
					font-size: 2rem;
					line-height: 2;
				}
				.image__container {
					max-width: 20rem;
				}
			}
		}
	}

	@media screen and (pointer: coarse) and (orientation: landscape) {
		.content {
			min-height: 100vmin;

			.team {
				.slogan {
					height: 22rem;
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.layout {
		grid-template-columns: minmax(auto, 70%) 30%;
	}
	.title {
		grid-column: 1;
	}
	.content {
		grid-column: 1/-1;
		height: auto;
		min-height: 110vmin;

		.team {
			height: auto;
			section {
				min-height: 90vmin;
				padding: 12rem 2rem 0rem;
			}
		}
	}

	.right {
		width: 100%;
		height: 22rem;

		.deco {
			display: none;
		}
		.thumbnail {
			height: 22rem;
		}
	}
}