/* [doctor_information] card (Figma 3170:6802 / mobile 3181:2859). */

.doctor-information {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 12px;
	background-color: #fff;
	filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
	box-sizing: border-box;
}

.doctor-information__photo {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
	background-color: #000;
	box-shadow: 0 1.351px 2.703px 0 rgba(0, 0, 0, 0.2);
}

.doctor-information__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.doctor-information__details {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-family: "Manrope", sans-serif;
}

.doctor-information .doctor-information__name,
.doctor-information .doctor-information__position {
	margin: 0;
	font-weight: 700;
}

.doctor-information__name {
	color: #000;
	font-size: 18px;
	line-height: 18px;
}

.doctor-information__position {
	color: #1a5699;
	font-size: 12px;
	line-height: 12px;
	text-transform: capitalize;
}

.doctor-information__credentials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doctor-information__credentials li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #505050;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	text-transform: capitalize;
}

.doctor-information__credentials li:not(:last-child)::after {
	content: "";
	display: block;
	width: 1px;
	height: 8.3px;
	background-color: #9c9c9c;
}

@media (min-width: 768px) {
	.doctor-information {
		gap: 16px;
	}

	.doctor-information__photo {
		width: 64px;
		height: 64px;
		box-shadow: 0 1.73px 3.459px 0 rgba(0, 0, 0, 0.2);
	}

	.doctor-information__details {
		gap: 8px;
	}

	.doctor-information__name {
		font-size: 20px;
		line-height: 20px;
	}

	.doctor-information__position,
	.doctor-information__credentials li {
		font-size: 14px;
		line-height: 14px;
	}
}