@use "../utilities" as *;

/* START: Feature CSS */

.feature-item {
	&.style-4 {
		padding: 10px;
		position: relative;
		z-index: 1;
		&::before {
			content: "";
			position: absolute;
			width: calc(100% - 20px);
			height: 65%;
			background: linear-gradient(
				180deg,
				rgba(225, 232, 240, 0) 0%,
				rgba(225, 232, 240, 1) 100%
			);
			bottom: 10px;
			inset-inline-start: 10px;
			z-index: -1;
		}
		.feature-icon {
			margin: 20px;
			margin-bottom: 55px;
			@media #{$sm, $xs} {
				margin-bottom: 30px;
			}
		}
		.feature-content {
			padding: 30px 20px;
			@media #{$sm, $xs} {
				padding: 20px;
			}
		}
		&:hover {
			&::before {
				height: 100%;
				background: linear-gradient(
					180deg,
					rgba(225, 232, 240, 0) 0%,
					rgba(225, 232, 240, 1) 70%
				);
			}
		}
	}
}