/*
Block Name: Seven Five Five Icons
Description: A block to show your icons and text.
*/

.block-seven-five-five-icons :is(h1, h2, h3, h4, h5, h6, p, li) { color: var(--brand-3) !important; }

.fivefive-icon { display: flex; align-items: center; margin-bottom: 2rem;}
.fivefive-icon img { max-width: 7.5rem;}
.icon-line { display: block; height: .2rem; background: #b8f2dd; width: 100%; margin-left: 2rem;}

.fivefive-icon img + :is(h1, h2, h3, h4, h5, h6, p){margin-top: 0;}
.fivefive-icon.has-title{gap: 2rem;}
.fivefive-icon.has-title .icon-line{display: none;}

.block-columns .col-icon{max-width:100px;margin:0 auto 2rem;}
.block-columns .flex-col > .button-block { margin-top: auto; }

.block-seven-five-five-icons.bg1 .fivefive-icon h4{color: var(--brand-9) !important;}

.block-seven-five-five-icons .col.accent{position: absolute; top: 0; left: 0; bottom: 0; height: 100%; max-width: 20vw;}
.block-seven-five-five-icons .col.accent img{width: auto; height: 100%; object-fit: cover;}

.block-seven-five-five-icons .block-content.has-accent .container .grid{margin-left: 15vw;}

@media screen and (max-width:768px ) {
	.block-seven-five-five-icons .col.accent{display: none;}
	.block-seven-five-five-icons .block-content.has-accent .container .grid{margin-left: 0;}
	.fivefive-icon.has-title{display: grid; grid-template-columns: 10rem 1fr;}
	.fivefive-icon.has-title h3{grid-column: span 2;}
	.fivefive-icon.has-title .icon-line{display: block; margin-left: 0;}
	
	.block-seven-five-five-icons .container .grid{margin-left: 0;}
}

@media screen and (max-width:576px ) {
	.col-bg-img { min-height: 30vh;}
}