.mosaic-callout {
	position: relative;
}

.mosaic-callout .header-cont {
	padding: var(--space-6);
	position: relative;
}

.mosaic-callout .header-cont::before {
	content: "";
	background-color: #eae6e4;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 120px;
	left: -40px;
	z-index: -1;
	transform: rotate(3deg);
}

.mosaic-callout .widget-title {
	font-family: var(--font-display);
	font-size: 40px;
	font-size: normal;
	font-weight: 700;
	letter-spacing: -0.8px;
	display: flex;
	flex-direction: column;
}

.mosaic-callout .widget-title .cursive {
	font-family: 'Yellowtail', cursive;
	font-size: 52px;
	font-style: normal;
	font-weight: 400;
	line-height: 58px;
	color: var(--blue);
}

.mosaic-callout .cols {
	display: grid;
	gap: var(--space-1);
}

.mosaic-callout .slide > .inner {
	display: grid;
}

.mosaic-callout .slide .img-cont,
.mosaic-callout .slide .content-section {
	position: relative;
	grid-column-start: 1;
	grid-row-start: 1;
}

.mosaic-callout .cols .slide .img-cont img {
	object-fit: cover;
	width: 100%;
}

.mosaic-callout .slide .img-cont::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.72) 100%);
	pointer-events: none;
	border-radius: 4px;
}

.mosaic-callout .slide .content-section {
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding: 32px 24px;
	pointer-events: none;
}

.mosaic-callout .slide .title-cont {
	width: 100%;
	display: flex;
	align-items: end;
}

.mosaic-callout .slide .content-section .slide-title,
.mosaic-callout .slide .content-section .slide-title > a {
	position: relative;
	font-family: var(--font-display);
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.48px;
	text-shadow: 2px 8px 8px rgba(0,0,0,0.24);
	color: var(--white);
	text-decoration: none;
	margin-bottom: var(--space-2);
	flex: 1;
}

.mosaic-callout .slide .content-section .slide-title > a {
	pointer-events: all;
}

.mosaic-callout .slide .content-section .triangle {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 8px 0 8px 13.9px;
	border-color: transparent transparent transparent var(--gold);
	position: relative;
	bottom: var(--space-3);
}

.mosaic-callout .slide .content-section .blog-categories,
.mosaic-callout .slide .content-section .details {
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2.08px;
	text-transform: uppercase;
}

.mosaic-callout .view-all {
	background-color: var(--gold);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 4px;
	margin: var(--space-4) var(--space-8); 
}

.mosaic-callout .view-all > a {
	color: var(--black);
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 2.24px;
}

.mosaic-callout .view-all.desktop,
.mosaic-callout .deco-desktop { display: none; }

@media screen and (min-width: 769px) {
	.mosaic-callout {
		margin: 0 auto;
	}
	
	.mosaic-callout .header-cont .widget-title {
		margin-left: var(--space-24);
	}
	
	.mosaic-callout .widget-description {
		max-width: 35%;
		margin-left: var(--space-24);
	}
	
	.mosaic-callout .header-cont::before {
		display: none;
	}
	
	.mosaic-callout .deco-desktop {
		display: block;
		position: absolute;
		top: 57px;
		left: 0;
		z-index: -1;
		width: 90vw;
	}
	
	.mosaic-callout .widget-title {
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.mosaic-callout .widget-title .cursive {
		margin-left: 1rem;
	}
	
	.mosaic-callout .view-all.mobile { display: none; }
	.mosaic-callout .view-all.desktop {
		display: inline-flex;
		margin-left: var(--space-24);
	}
	
	.mosaic-callout .cols {
		grid-template-columns: repeat(2, 1fr);
		margin-left: var(--space-24);
		margin-right: var(--space-24);
	}
	
	.mosaic-callout .cols .promoted {
		grid-row: 1 / span 2;
	}
	
	.mosaic-callout .cols .slide:nth-child(2),
	.mosaic-callout .cols .slide:nth-child(3) {
		position: relative;
		transform: translateY(-25%);
	}
	
	.mosaic-callout .cols .slide > .inner { 
		overflow: hidden; 
		border-radius: 4px;
		height: 100%;
	}
	
	.mosaic-callout .cols .slide > .inner img {
		transition: all 0.3s ease-in-out;
		height: 100%;
	}
	
	.mosaic-callout .cols .slide > .inner:hover img {
		transform: scale(1.2);
		transition: all 0.3s ease-in-out;
	}
	
	.mosaic-callout .slide .title-cont {
		flex-direction: column;
		align-items: start;
		gap: var(--space-2);
		margin-bottom: var(--space-1);
	}
}