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

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

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

	height: 100%;

	border-bottom: 1px solid var(--color-secondary-light);

	background-color: transparent;
}

.cards--icon .cards__item a {
	transition: 0.15s ease-in-out;
}

.cards--icon .cards__item a:hover {
	background-color: var(--color-secondary-hover);
}

.cards--icon .cards__content {
	padding: 2rem 1.5rem 2rem 3rem;
}

.cards--icon .cards__item.item--1:before {
	content: "01";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--2:before {
	content: "02";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--3:before {
	content: "03";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--4:before {
	content: "04";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--5:before {
	content: "05";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--6:before {
	content: "06";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--7:before {
	content: "07";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item.item--8:before {
	content: "08";
	position: absolute;
	top: calc(50% - 1.75rem);
	left: 10px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.cards--icon .cards__item:after {
	content: "→";
	position: absolute;
	top: calc(50% - 1.75rem);
	right: 15px;

	font-size: 20px;
	font-weight: 500;

	color: var(--color-primary-light);

	margin-left: 10px;
	display: inline-block;
	transition: 0.5s ease-in-out;
}

.cards--icon .cards__item:has(a:hover)::after {
	transform: translateX(5px);
}

.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;

	font-family: var(--font-primary);
	font-size: var(--font-size-xl);
	font-weight: var(--heading-weight-medium);

	color: var(--color-text);

	height: auto;
	overflow: hidden;

	margin: 0 0 0.5rem;
}

.cards--icon .cards__description {
	height: auto;
	overflow: hidden;
	margin-bottom: 0;

	font-size: var(--font-size-lg);
	font-weight: 300;

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

.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: 0px 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;
	}
}