/* ==========================================================================
   Cards - Icon
   ========================================================================== */

.cards--icon .cards__items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.cards--icon .cards__item {
	position: relative;

	height: 100%;
	padding: 2rem 1.5rem;

	border: 2px solid var(--color-primary);
	border-radius: 30px;

	background-color: transparent;
}

.cards--icon .cards__item.item--1:before {
	content: "1";
	position: absolute;
	right: 10px;
	bottom: 0px;
	font-size: 4rem;
	color: var(--color-primary);
}

.cards--icon .cards__item.item--2:before {
	content: "2";
	position: absolute;
	right: 10px;
	bottom: 0px;
	font-size: 4rem;
	color: var(--color-primary);
}

.cards--icon .cards__item.item--3:before {
	content: "3";
	position: absolute;
	right: 10px;
	bottom: 0px;
	font-size: 4rem;
	color: var(--color-primary);
}

.cards--icon .cards__item.item--4:before {
	content: "4";
	position: absolute;
	right: 10px;
	bottom: 0px;
	font-size: 4rem;
	color: var(--color-primary);
}

.cards--icon .not-icons .cards__item {
	position: relative;

	height: 100%;
	padding: 2.5rem 1.5rem 2.5rem;

	border: 3px solid var(--color-primary);
	border-radius: 30px;

	background-color: transparent;
}

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */

.cards--icon .cards__icon {
	position: relative;

	width: 90px;
	height: 90px;

	margin-top: -8rem;
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.cards--icon .cards__icon-ico {
	display: block;

	width: 90px;
	height: 90px;

	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.cards--icon .cards__title {
	display: flex;
	align-items: center;
	justify-content: center;

	font-family: var(--font-primary);
	font-size: var(--font-size-lg);
	font-weight: var(--heading-weight-bold);

	color: var(--color-secondary);

	height: 90px;
	overflow: hidden;

	margin: 0 0 0.75rem;
}

.cards--icon .cards__description {
	height: 90px;
	overflow: hidden;
	margin-bottom: 1.5rem;

	color: var(--color-secondary);
}

.cards--icon .cards__cta {
	margin-top: auto;
}

/***** CARD ICON SLICK *****/

.cards--icon .cards__items.slick-2 .slick-slide,
.cards--icon .cards__items.slick-3 .slick-slide,
.cards--icon .cards__items.slick-4 .slick-slide {
	margin-left: 15px !important;
	margin-right: 15px !important;
}

.cards--icon .cards__items.slick-2,
.cards--icon .cards__items.slick-3,
.cards--icon .cards__items.slick-4 {
	margin-left: -15px !important;
	margin-right: -15px !important;
}

.cards--icon .cards__items.slick-2 .slick-list,
.cards--icon .cards__items.slick-3 .slick-list,
.cards--icon .cards__items.slick-4 .slick-list {
	padding: 0px 0 10px !important;
}

.cards--icon .not-icons.cards__items.slick-2 .slick-list,
.cards--icon .not-icons.cards__items.slick-3 .slick-list,
.cards--icon .not-icons.cards__items.slick-4 .slick-list {
	padding: 0px 0 10px !important;
}

/***** RESPONSIVE *****/

@media (max-width: 767.98px) {
	.cards--icon .cards__items.slick-2 .slick-slide,
	.cards--icon .cards__items.slick-3 .slick-slide,
	.cards--icon .cards__items.slick-4 .slick-slide {
		margin: 0 20px !important;
	}

	.cards--icon .cards__items.slick-2,
	.cards--icon .cards__items.slick-3,
	.cards--icon .cards__items.slick-4 {
		margin: 0 0px !important;
	}

	.cards--icon .cards__items.slick-2 .slick-list,
	.cards--icon .cards__items.slick-3 .slick-list,
	.cards--icon .cards__items.slick-4 .slick-list {
		padding: 30px 0 10px !important;
	}

	.cards--icon .cards__items.slick-2,
	.cards--icon .cards__items.slick-3,
	.cards--icon .cards__items.slick-4 {
		margin: 0 0px !important;
	}

	.cards--icon .cards__icon {
		margin-top: -7.5rem;
		width: 80px;
		height: 80px;
	}

	.cards--icon .cards__icon-ico {
		width: 80px;
		height: 80px;
	}

	.cards--icon .not-icons .cards__item {
		padding: 2rem 1rem 2rem;
	}
}