.text_image_cards_block {}


/* Heading */
.text_image_cards_block .top { text-align: center; margin-bottom:40px; }
.text_image_cards_block .top :is(h2,h3):last-child { margin-bottom: 0; }


/* Cards */
.text_image_cards_block .cards { display: grid; gap: 20px; }
.text_image_cards_block .item { display: grid; grid-template-columns: 128px auto; background: var(--color_white); box-shadow: var(--shadow_lg); }
.text_image_cards_block .item_image { overflow: hidden; }
.text_image_cards_block .item_image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

.text_image_cards_block .text { display: grid; gap:20px; padding: 24px; height: min-content; margin-block: auto; }
.text_image_cards_block .cards .item_title{ font: var(--font_body_xlarge); font-weight: 600; }
.text_image_cards_block .item_text { display: none; color: var(--color_grey_1); font: var(--font_body_medium);}
.text_image_cards_block .item_link{ margin-block: auto 0; }
.text_image_cards_block a { --color_link: var(--color_blue_3); position:relative; display:inline-flex; gap: 10px; color:var(--color_link); justify-content: center; text-decoration: none;}
.text_image_cards_block a:hover { text-decoration: none; }
/* As columns */
.text_image_cards_block .cards.as_columns .item { height: 100%; grid-template-columns: unset; grid-template-rows: min-content auto; }
.text_image_cards_block .as_columns .item_image,
	.text_image_cards_block .as_columns .item_image img { aspect-ratio: 3 / 2; }
.text_image_cards_block .cards.as_columns .text { padding: 48px; height: 100%;}
.text_image_cards_block .cards.as_columns .item_text{ font: var(--font_body_medium); font-weight: 300; }


/* Slider */
.text_image_cards_block .slick-track{ display: flex !important; padding-bottom: 10px; }
.text_image_cards_block .slick-slide{ height: inherit !important; }
.text_image_cards_block .slick-slide .item{ height: 100%; margin-inline: 16px; }
.text_image_cards_block .slick-slide .text{ display: grid; gap: 20px; padding: 48px 20px; grid-template-rows: min-content; }
/* Hide other items until slick is initialized */
.text_image_cards_block .cards_slider{ display: flex; }
@media screen and (max-width:599px) {
	.text_image_cards_block .cards_slider .item_outer:not(:first-child) { display:none; }
}
@media screen and (min-width:600px) {
	.text_image_cards_block .cards_slider .item_outer:nth-child(n + 4) { display:none; }
}
.text_image_cards_block .slick-initialized .item_outer { display:block!important; }



/* Slider Arrows */
.text_image_cards_block .slider_wrapper{ position: relative; }
.text_image_cards_block .arrows { position: absolute; width: calc(100% + 48px); top: 50%; display: flex; align-items: center; justify-content: space-between; z-index: 2; max-width: 100vw; left: 50%; transform: translate(-50%, -50%); height: 0;}
.text_image_cards_block .arrows button{ position: relative; overflow: hidden; border-radius: 999px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border:0; background-color:var(--color_white); color:var(--color_black); top: 0; box-shadow: var(--shadow_lg); text-indent:-999px;}
.text_image_cards_block .arrows button.slick-prev{ left:0;}
.text_image_cards_block .arrows button.slick-prev:after{
	content: "";
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z' %3E%3C/path%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
    position: absolute;
}
.text_image_cards_block .arrows button.slick-next{ right:0; }
.text_image_cards_block .arrows button.slick-next:after{
	content: "";
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z' transform='translate(100, 100) rotate(180) '/%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
    position: absolute;
}


/*___________ desktop only ___________*/
@media screen and (min-width:961px) {
	.text_image_cards_block .cards:not(.cards_slider).as_columns { grid-template-columns: repeat(3, 1fr); }
	.text_image_cards_block .item { grid-template-columns: 400px auto; }
	.text_image_cards_block .text { padding: 96px; }
	.text_image_cards_block .item_text { display: revert; }
	.text_image_cards_block .as_columns .item { grid-template-columns: repeat(auto-fill, minmax(100px, calc(35% - 80px))); }
	.text_image_cards_block .cards { gap: 60px 20px; }
}

/*____________ mobile only ____________*/
@media screen and (max-width:960px) {
	.text_image_cards_block .cards:not(.cards_slider).as_columns { grid-template-columns: 1fr; }
}