:root {
  --gap: 16px;
}

.doctors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.doctor-card {
	display: flex;
	flex-direction: column;
	background-color: #f7f7f9;
	border-radius: 8px;
}

.doctor-img {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.doctor-card-body {
	padding-top: 16px;
	margin-bottom: auto;
	padding: 16px;
}

.doctor-name {
	font-weight: 500;
	font-size: 18px;
}

.doctor-position {
	font-weight: 500;
	color: #12a5d7;
}

@media (min-width: 768px) {
	:root {
	    --gap: 32px;
	}
	
	.doctor-card {
		flex: 1 1 calc(50% - var(--gap));
	}
}

@media (min-width: 992px) {
	.doctor-card {
		flex: 0 1 calc(25% - var(--gap));
	}
}