.flex_filler {box-sizing: border-box; width: 80px; height: 300px;}
.box.benefits {overflow: hidden; }
.box.benefits .row .cols .wrapper {display: flex;  flex-direction: row; flex-wrap: wrap; gap: var(--colSpace); }
.box.benefits .row .cols .wrapper .benefit_item  {height: 300px; border-radius: 20px; border: 1px solid rgb(var(--grey100)); box-sizing: border-box; padding-left: 25px; padding-right: 25px;  transition: opacity 3s, transform 2s; display: grid; grid-template-rows: 120px fit-content(100%) 1fr; width: calc(var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1)); opacity: 0; transform: translateX(-100vw);}
.box.benefits .row .cols .wrapper .benefit_item:hover {transform: scale(105%)!important;}
.box.benefits .row .cols .wrapper .benefit_item.white {background-color: white;}
.box.benefits .row .cols .wrapper .benefit_item.grey {background-color: rgb(var(--grey100)); color: white;}
.box.benefits .row .cols .wrapper .benefit_item.small {--index: 3;}
.box.benefits .row .cols .wrapper .benefit_item.large {--index: 4;}
.box.benefits .row .cols .wrapper .benefit_item.is_visible {opacity: 1; transform: translateX(0) scale(100%);}
.box.benefits .row .cols .wrapper .benefit_item div.image {grid-row: 1; grid-column: 1; align-self: center;}
.box.benefits .row .cols .wrapper .benefit_item div.image  img {width: 50px; height: auto;}
.box.benefits .row .cols .wrapper .benefit_item div.titel {grid-row: 2; grid-column: 1; align-self: center; font-family: "Medium"; font-size: var(--fontLarger); line-height: var(--fontLargerLH); padding-bottom: 20px;}
.box.benefits .row .cols .wrapper .benefit_item div.info {grid-row: 3; grid-column: 1; align-self: start; padding-bottom: 20px;}
.box.benefits .row .cols .wrapper .benefit_item.item_4, .box.benefits .row .cols .wrapper .benefit_item.item_5, .box.benefits .row .cols .wrapper .benefit_item.item_6 {transform: translateX(100vw);}
.box.benefits .row .cols .wrapper .benefit_item.item_4.is_visible, .box.benefits .row .cols .wrapper .benefit_item.item_5.is_visible, .box.benefits .row .cols .wrapper .benefit_item.item_6.is_visible {transform: translateX(0) scale(100%); opacity: 1;}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
	.flex_filler {display: none;}
	.box.benefits .row .cols .wrapper .benefit_item  {grid-template-rows: 100px fit-content(100%) 1fr;}
	.box.benefits .row .cols .wrapper .benefit_item div.titel {font-size: 18px; padding-bottom: 20px;}
	.box.benefits .row .cols .wrapper .benefit_item.small {--index: 4;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.flex_filler {display: none;}
	.box.benefits .row .cols .wrapper .benefit_item {transform: translateX(0) scale(0.1%); opacity: 0.01; }
	.box.benefits .row .cols .wrapper .benefit_item.item_4, .box.benefits .row .cols .wrapper .benefit_item.item_5, .box.benefits .row .cols .wrapper .benefit_item.item_6 {transform: translateX(0) scale(0.1%); opacity: 0.01;}
	.box.benefits .row .cols .wrapper .benefit_item  {grid-template-rows: 100px fit-content(100%) 1fr;}
	.box.benefits .row .cols .wrapper .benefit_item div.titel {font-size: 18px; padding-bottom: 20px;}
	.box.benefits .row .cols .wrapper .benefit_item.small {--index: 6;}
	.box.benefits .row .cols .wrapper .benefit_item.large {--index: 6;}
}

@media only screen and (max-width: 767px) {
	.flex_filler {display: none;}
	.box.benefits .row .cols .wrapper {gap: 20px;}
	.box.benefits .row .cols .wrapper .benefit_item.large {--index: 12;}
	.box.benefits .row .cols .wrapper .benefit_item.small {--index: 12;}
	.box.benefits .row .cols .wrapper .benefit_item {grid-template-rows: fit-content(200px) 1fr; grid-template-columns: 70px 1fr; height: auto;}	
	.box.benefits .row .cols .wrapper .benefit_item div.image {grid-row: 1; grid-column: 1;}	
	.box.benefits .row .cols .wrapper .benefit_item div.image img {width: 50px; height: auto; grid-row: 1; grid-column: 1;}	
	.box.benefits .row .cols .wrapper .benefit_item div.titel {grid-row: 1; grid-column: 2; padding: 20px 20px 20px 0px;}	
	.box.benefits .row .cols .wrapper .benefit_item div.info {grid-row: 2; grid-column: 1/3;}	
	.box.benefits .row .cols .wrapper .benefit_item {transform: translateX(0) scale(1%); opacity: 0.01; }
	.box.benefits .row .cols .wrapper .benefit_item.item_4, .box.benefits .row .cols .wrapper .benefit_item.item_5, .box.benefits .row .cols .wrapper .benefit_item.item_6 {transform: translateX(0) scale(1%); opacity: 0.01;}
}