features.scss

.features {
	@extend %flexbox;
	@include flex-flow(wrap);
	padding: 50px 0 30px 0;

	.feature {
		list-style: none;
		padding: 0;
		margin: 0 10px 50px 10px;
		text-align: center;
		border: 1px solid #eee;
		border-radius: 5px;
		box-shadow: 0px 0px 10px #eee;
		width: 100%;

		&_li{
			margin: 0 25px;
			margin-left: 35px;
			text-align: left;
			list-style:circle;
			text-align: center;
			border-bottom: 1.5px solid rgb(233, 233, 233);

		}
		
		
		.highlighted {
			text-align: center;
			height: 110px;
			font-weight: 600;
			color: #272727d3;
			font-size: 1.2em;
			padding: 30px 15px;
			background-color: rgb(247, 247, 247);
			border-top-right-radius:0;
			border-top-left-radius: 0;
			box-shadow: inset 0 2px 12.5px rgba(0,0,0,0.01);
			text-transform: capitalize;
		}

		.features-cta {
			padding: 0;
			a {
				display: block;
				box-sizing: border-box;
				padding: 20px 0;
				border-radius: 0 0 2px 2px;
				border: 0;
				color: white;
			}
			.start { 
				text-align: center;
				margin: auto;
				position: relative;
				background-color: $coolgray;
			}
			.start:hover  {
				background-color: $darkgreen;
			}
		}

		@media #{$desktop} {
			-webkit-flex: 1;
			flex: 1;
			min-width: 220px;
		}

		li {
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
			padding: 20px 0;
			h3 {
				padding: 0;
				margin: 0;
				font-size: 1.75rem;
				color: #fff;
				font-weight: bold;
			}	
		}
	}
}

@media(max-width:1025px){
	.highlighted{
		height: 90px !important;
	}
}

@media(max-width:875px){
	.features .feature li{
		padding: 30px 0;
	}
}

@media(max-width:750px){
	.highlighted{
		height: 60px !important;
	}
}


.faq {
	@media #{$desktop} {
		@include columns(2);
	}
	color: #666;
	div {
		break-inside: avoid;
		padding: 25px 0;
	}

	dt {
		font-weight: bold;
		margin: 0 0 5px 0;
	}

	dd {
		padding: 0;
		margin: 0;

	}
}