.cards-hover {
	& .container {
		padding-top: 100px;
		padding-bottom: 80px;
	}
	
	& .cards-hover-wrapper {
		margin: 0 auto;
		padding-top: 40px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}
	
	& .cards-hover-card {
		height: 100%;
		
		&:focus {
		  outline: none;
		}
		
		& > div {
			border-radius: 12px;
			background: #FFF;
			box-shadow: 0px 0px 22px 0px rgba(4, 4, 4, 0.10);
			padding: 32px;
			height: 100%;
		}
		
		& img {
			width: 70px;
			height: 70px;
			object-fit: contain;
			object-position: center;
			margin: 0 0 20px 0;
			padding: 0;
		}
		
		& p {
			margin: 0;
			padding: 0;
		}
		
		& .cards-hover-heading {
			color: #343A40;
			font-size: 24px;
			font-weight: 600;
			line-height: 1.1;
			letter-spacing: normal;
		}
		
		& .cards-hover-text {
			color: var(--color-text-gray);
			font-size: 16px;
			font-weight: 400;
			line-height: 1.55;
			letter-spacing: 0.09px;
			margin-top: 20px;
		}
	}
}


@media (min-width: 800px) {
	.cards-hover .cards-hover-wrapper {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1300px) {
	.cards-hover {
		& .cards-hover-wrapper {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			max-width: 1156px;
			justify-content: center;
			align-items: stretch;
			gap: 0;
		}
		
		& .cards-hover-card {
			flex-basis: unset;
			& > div {
				transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;
				width: 271px;
				min-width: 220px;
				flex-shrink: 1;
				min-height: 199px;
				max-height: 199px;
				box-sizing: border-box;
				border: 3px solid transparent;
				padding: 29px;
			}

			&:not(:first-child) {
				padding-left: 12px;
			}

			&:not(:last-child) {
				padding-right: 12px;
			}
			
			& .cards-hover-show {
				overflow: hidden;
				max-height: 0px;
				opacity: 0;
				transition: 0s max-height ease-in-out, 0.2s opacity ease-in-out;
				user-select: none;
				pointer-events: none;
			}

			& .cards-hover-hide {
				overflow: hidden;
				max-height: 90px;
				transition-delay: 0.1s;
				transition: 0.2s max-height ease-in-out, 0.2s opacity ease-in-out;
			}

			&.expand {
				> div {
					flex-grow: 1;
					border-color: #215273;
				}
				
				& .cards-hover-show {
					max-height: 120px;
					opacity: 1;
					transition-delay: 0.1s;
					user-select: unset;
					pointer-events: unset;
				}

				& .cards-hover-hide {
					max-height: 0px;
					opacity: 0;
					transition-delay: 0s;
					user-select: none;
					pointer-events: none;
				}
				
				&:nth-child(1) > div {
					width: 311px;
				}
				
				&:nth-child(2) > div {
					width: 358px;
				}
				
				&:nth-child(3) > div {
					width: 386px;
				}
				
				&:nth-child(4) > div {
					width: 329px;
				}
			}
		}
		
		&.larger-boxes {
			& .cards-hover-card {
				height: auto;
				& > div {
					max-height: 300px;
				}
			}
		}
		
	}

}