.meds {
	padding-inline: 10rem;
}

.med {
	display: flex;
	box-shadow: 0 0.25rem 0.5rem gray;
	margin: 2rem;
	padding: 2rem;
	border-radius: 2rem;
	background-color: lightcyan;
	cursor: pointer;
}

.active {
	background-color: lightgreen;
}

.harmful {
	background-color: lightcoral;
	pointer-events: none;
}

.med > img {
	height: 128px;
	border-radius: 1rem;
}

.med-info {
	padding-inline: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.med-info > a {
	width: fit-content;
}

.med-info-details {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.stars {
	color: yellow;
	align-items: center;
	height: 100%;
	font-size: x-large;
}

.summary {
	display: flex;
	padding: 2rem 0 5rem 15rem;
	width: 100%;
	gap: 2rem;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10rem;
}

.summary1 {
	display: flex;
	padding: 2rem 0 5rem 15rem;
	width: 100%;
	gap: 2rem;
	align-items: center;
	justify-content: flex-start;
	padding-right: 10rem;
}

.summary > span {
	display: flex;
	gap: 1rem;
}