.callout-tiles {
	--font-title: var(--font-display);
	--font-text: var(--font-body);
	--font-headline: var(--font-museo-cond-700);
	--font-slide-title: var(--font-georgia);
	--header-color: var(--quill-grey);
	--tile-bg-color: var(--sandy-brown);
	--cat-color: var(--grey-6f);
	--border-color: var(--black);

	position: relative;
	margin: 0 auto 50px;
}

.callout-tiles .widget-view-all {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 35px;
	padding-right: var(--space-5);
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.callout-tiles .widget-view-all .icon {
	margin-left: 6px;
}

.callout-tiles .intro {
	display: flex;
	flex-direction: column;
	min-width: 112px;
	max-width: 112px;
}

.callout-tiles .intro-inner {
	padding-left: var(--space-5);
}


.callout-tiles .intro-title {
	margin-bottom: var(--space-2);
	font-family: var(--font-title);
	font-size: 25px;
	line-height: 1;
}

.callout-tiles .intro-copy {
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
}

.callout-tiles .intro-copy::after {
	content: '';
	pointer-events: none;
	border-bottom: 3px solid var(--border-color);
	width: 25px;
	display: block;
	margin-top: 10px;
}

/*Slider*/

.callout-tiles .flexwrap {
	/* position: relative; */
	/* left: 112px; */
	/* top: 0; */
	/* width: calc(100% - 112px); */
	/* height: 143px; */
	margin-left: 140px;
}

.callout-tiles .intro{
	position: absolute;
	width: 112px;
	padding-top: 10px;
}

.callout-tiles .callout-tiles-inner {
	display: block;
	width: 100%;
}

/*Slick Slider*/
.callout-tiles .slick-slider:not(.slick-initialized) {
	max-height: 400px;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
}

.callout-tiles .slick-list {
	padding:0 50px 0 0;
}

@media screen and (min-width: 64em) {
	.callout-tiles .slick-list {
	    padding:0;
    }
}

.callout-tiles .slick-track {
	/* margin-left: 30px !important; */
}

.callout-tiles .slick-slide {
	/* width: 160px !important; */
	/* margin-right: 20px !important; */
	margin: 0 10px;
}

.slick-dots {
	bottom: -30px !important;
	right: 20px !important;
	text-align: right !important;
}

.slick-dots li {
	margin: 0 !important;
}

.callout-tiles .slick-dots li button {
	height: 20px;
	width: 20px;
}

.callout-tiles .slick-dots li button::before {
	font-size: 11px;
	color: var(--grey-6f);
}

.slick-dots li.slick-active button:before {
	color: var(--burnt-sienna) !important;
	opacity: 1 !important;
}

/*Slick Slider - end*/



.callout-tiles .slide a {
	/* display: block; */
	/* height: 100%; */
	/* width: 100%; */
}

.callout-tiles .slide .inner {
	/* height: 160px; */
	width: 100%;
	max-width: 160px;
	background-color: var(--tile-bg-color);
}

.callout-tiles .content-section {
	 padding: var(--space-8) var(--space-3);
	 max-width: 160px;
}

@media screen and (min-width:375px) {
	.callout-tiles .content-section {
	    padding: var(--space-8) var(--space-5);
    }
}

.callout-tiles .category {
	font-size: 11px;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cat-color);
	letter-spacing: 1px;
}

.callout-tiles .title {
	font-size: 16px;
	font-family: var(--font-slide-title);
	font-weight: 500;
}

@media (min-width: 64em) {
	.callout-tiles {
		max-width: var(--max-width-padded);
		padding: var(--max-width-padding);
	}

	.callout-tiles .widget-view-all {
		font-size: 13px;
		font-weight: 700;
		padding-right: 0;
	}

	.callout-tiles .callout-tiles-inner {
		display: flex;
		justify-content: center;
	}

	.callout-tiles .intro {
		position: relative;
		display: flex;
		justify-content: center;
		padding-top: 0;
		margin-right: 0;
		min-width: 168px;
		max-width: 168px;
		width: 188px;
	}

	.callout-tiles .intro-inner {
		padding-left: 0;
	}

	.callout-tiles .intro-copy::after {
		border-bottom: 4px solid var(--border-color);
		width: 32px;
	}

	.callout-tiles .flexwrap {
		position: relative;
		left: initial;
		top: initial;
		width: initial;
		height: initial;
		margin-left: initial;
	}

	.callout-tiles .slider-cont {
		display: flex;
		gap: 18px;
		justify-content: center;
		align-items: fle-x;
		margin: 0 auto;
	}

	.callout-tiles .slides {
		gap: 34px;
	}

	.callout-tiles .slide {
		flex-basis: 20%;
	}

	.callout-tiles .slide .inner {
		height: initial;
		width: initial;
		max-width: initial;
	}

	.callout-tiles .slides a:hover {
		text-decoration: none;
	}

	.callout-tiles .title {
		font-size: 18px;
	}

	.callout-tiles .slide {
	    background-color: var(--tile-bg-color);
    }
} 

@media (min-width: 90em) {
	.callout-tiles .widget-view-all {
		padding-right: 0;
	}

	.callout-tiles .intro {
		min-width: 168px;
		max-width: 168px;
		margin-right: 54px;
	}

	.callout-tiles .slider-cont {
		gap: 34px;
	}

	.callout-tiles .slides {
		gap: 34px;
		overflow: hidden;
	}

	.callout-tiles .slide {
		flex-basis: unset;
		height: unset;
	}

	.callout-tiles .slide .inner {
		/* height: 192px; */
		width: 192px;
	}

	.callout-tiles .intro-title {
		font-size: 30px;
	}

	.callout-tiles .intro-copy {
		font-size: 17px;
		line-height: 1.4;
	}

	 .callout-tiles .category {
		font-size: 13px;
	}

	.callout-tiles .title {
		font-size: 20px;
	}
	
}