.main-and-footer { 	display: flex; 	flex-direction: column; 	 	margin-top: 50px; 	 	 	 	align-items: center; 	 }     .main-content { 	display: flex; 	flex-direction: row;  	 	max-width: 1000px; 	width: 100%; 	 	 	 	 	 	border-radius: 3px; 	margin-top: 10px; 	margin-bottom: 10px; } .main-content-left { 	display: flex; 	width: 700px; 	flex-direction: column; 	 	 	 	padding: 20px; 	background-color: white; 	border-radius: 3px; 	gap: 20px; } .main-content-right { 	display: flex; 	width: 290px; 	flex-direction: column; 	margin-left: 10px; 	padding: 20px; 	background-color: white; 	border-radius: 3px; 	align-items: center; }     .detail-title { 	display: grid; 	 } .detail-people {	 	display: grid; 	grid-template-columns: 40px auto; 	align-items: center; 	gap: 10px;	 } .detail-people img { 	height: 40px; 	width: 40px; 	border-radius: 20px; 	object-fit: cover;  	display: block;  	 } .detail-people-info {	 	 	 	display: grid; 	grid-template-rows: auto auto; 	justify-content: left; 	gap: 2px; 	 	 } .detail-people-info1 {	 	font-size: 15px; 	font-weight: bold; 	 } .detail-people-info2 {	 	font-size: 14px; 	 	color: #828CA0; }  .detail-description { 	white-space: pre-line;  	font-size: 16px; 	line-height: 24px; } .detail-img { 	display: grid; 	width: 100%; 	min-height: calc(100vh - 150px); 	place-items: center; 	gap: 20px; } .detail-img img { 	 	max-width: 540px; 	width: 100%; 	object-fit: cover; 	display: block; 	border: 1px solid #FFAF96; 	border-radius: 3px; }     .detail-h-bar {	 	display: flex; 	flex-direction: column; 	align-items: center; 	gap: 10px; 	position: fixed; } .detail-h-bar img { 	height: 50px; 	width: 50px; 	border-radius: 25px; 	object-fit: cover;  	display: block;  	 } .detail-h-actions { 	display: flex; 	flex-direction: column; 	gap: 20px; 	color: gray; 	font-size: 14px; 	margin-top: 5px; 	color: #828CA0; } .detail-h-actions div { 	display: flex; 	flex-direction: column; 	align-items: center;  	gap: 2px; } .detail-h-actions i { 	font-size: 30px; }         @media (max-width: 992px) { 	.main-content-left { 		 		width: 75%; 	} 	.main-content-right { 		 		width: 24%; 		margin-left: 8px; 	} } @media (max-width: 768px) { 	.main-content-left { 		 		width: 80%; 	} 	.main-content-right { 		 		width: 19%; 		margin-left: 6px; 	} } @media (max-width: 576px) { 	.main-content-left { 		 		width: 91%; 	} 	.main-content-right { 		 		width: 9%; 		margin-left: 4px; 		 		 		flex-shrink: 1; 		min-width: 54px; 	} }