:root {
	--breed-card-img-width: 25%;
	--breed-card-img-max-width: 20rem;
	--stat-bar-width: 10em;
	--stat-bar-height: 2em;
	--breed-card-transition: all 0.5s ease-in-out;
}

.breed-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
	width: 90%;
	padding-bottom: 4em;
	height: fit-content;
	overflow: auto;
	transition: var(--breed-card-transition);
	transition-property: opacity, margin-top;
}

.card-breed {
	width: 90%;
	height: fit-content;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 0;
	box-shadow: 0.4em 0.4em 0.4em 0px rgba(0, 0, 0, 0.25);
	border-radius: var(--breed-card-border-radius);
	overflow: hidden;
}

.card-breed-top {
	position: relative;
	display: flex;
	width: 100%;
	height: 10vw;
	background: var(--breed-card-top-bg) 50% / cover no-repeat;
	cursor: pointer;
}

.card-breed-info {
	display: flex;
	max-width: 100%;
	flex-grow: 1;
}

.card-breed-img {
	margin-right: 10px;
	position: relative;
	flex-grow: 0;
	width: var(--breed-card-img-width);
	max-width: var(--breed-card-img-max-width);
	height: 100%;
	overflow: hidden;
}

.card-breed-img-filter {
	position: absolute;
	top: 0;
	left: 2px;
	content: '';
	width: var(--breed-card-img-width);
	max-width: var(--breed-card-img-max-width);
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(211, 211, 211, 0) 0%,
		var(--breed-card-top-bg) 90%,
		var(--breed-card-top-bg) 100%
	);
}

.card-breed-img > img {
	height: 150%;
	object-fit: cover;
}

.card-breed-def {
	height: 100%;
	width: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card-breed-land {
	margin-bottom: -0.5em;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.2em;
}

.card-breed-land img {
	height: 1em;
}

.card-breed-name {
	font-size: 3em;
	max-width: 8em;
	max-height: 1.5em;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: var(--text-color-heavy-black);
}

.card-breed-stats {
	display: flex;
	margin-right: 3em;
	margin-left: auto;
	align-items: center;
	justify-content: flex-start;
	gap: 7em;
}

.card-breed-stat {
	position: relative;
}

.stat-and-value {
	display: flex;
	position: absolute;
	top: -2em;
	width: max-content;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 0.5em;
	line-height: 1em;
}

.stat-bar {
	position: relative;
	content: '';
	width: var(--stat-bar-width);
	height: var(--stat-bar-height);
	border-radius: 1em;
	background: var(--breed-card-bar-bg);
}

.stat-bar-percent {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		rgba(255, 183, 128, 1) 0%,
		rgba(255, 85, 85, 1) 100%
	);
}

.card-breed-expand-button {
	position: relative;
	margin-left: -1%;
	margin-right: 2em;
	width: 1em;
	height: 100%;
	content: '';
}

.card-breed-expand-button::after {
	position: absolute;
	content: '';
	top: 45%;
	left: 0;
	margin-right: 1em;
	width: 1em;
	height: 1em;
	border-top: 0.1em solid var(--text-color-heavy-black);
	border-left: 0.1em solid var(--text-color-heavy-black);
	rotate: -135deg;
	transform-origin: 0.4em 0.4em;
	transition: var(--breed-card-transition);
	transition-property: rotate;
}

.card-breed-expand-button-active::after {
	rotate: 45deg;
}

.card-breed-more-info {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--breed-card-more-info-bg);
	overflow: hidden;
	transition: var(--breed-card-transition);
	transition-property: height;
}

.card-breed-more-info > .text-para-light {
	position: relative;
	padding: 3em 5em;
	padding-bottom: 2em;
	font-size: 1.25em;
	line-height: 2.5em;
}

.card-breed-fullname {
	position: absolute;
	top: 1.5em;
	left: 3em;
}

@media (max-width: 600px) {
	:root {
		--stat-bar-width: 6em;
		--stat-bar-height: 1em;
	}

	.breed-cards {
		padding-bottom: 20em;
	}

	.breed-tools {
		display: grid;
		font-size: 3vw;
		gap: 0.5em;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		align-content: center;
	}

	#breed-search {
		grid-column: 1 / span 2;
	}

	#breed-filter {
		order: 2;
		margin: auto;
	}

	#breed-sort {
		order: 3;
		margin: auto;
	}

	.card-breed-top {
		font-size: 2vw;
		flex-direction: column;
		height: 33vw;
	}

	.card-breed-img-filter {
		display: none;
	}

	.card-breed-img {
		margin: 0 0;
		width: 100%;
		min-width: 100%;
		height: 65%;
	}

	.card-breed-img img {
		width: 100%;
		height: auto;
		object-fit: cover;
		margin-top: -2em;
	}

	.card-breed-info {
		padding: 0 2.75em;
		padding-top: 1em;
	}

	.card-breed-def {
		margin-right: 1em;
		width: 12em;
		max-width: 12em;
		min-width: 12em;
	}

	.card-breed-land {
		margin-bottom: -0.75em;
	}

	.card-breed-stats {
		margin: 0 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0.2em;
		flex-grow: 1;
	}

	.card-breed-stat {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.stat-and-value {
		position: static;
		top: 0;
		left: 0;
	}

	.stat-name {
		transform: translateY(0.1em);
	}

	.stat-bar {
		margin-left: auto;
	}

	.card-breed-expand-button {
		display: none;
	}

	.card-breed-more-info > .text-para-light {
		padding: 1em 2em;
		padding-top: 2em;
		font-size: 2em;
	}

	.card-breed-fullname {
		top: 0.5em;
		left: 1em;
	}
}