/*
Block Name: Featured Projects
Description: A custom block for BAS Frames for displaying case studies.
*/

body.wp-admin section.block-columns { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { font-size: 2rem; color: #e88b39; font-weight: 600; content: "This is an empty *block* - add content"; padding: 2rem 0; display: block;}
body.wp-admin section .container .grid .col:empty:before { color: #e88b39; font-weight: 600; content: "This is an empty *column* - add content"; padding: 2rem 0; display: block;}
section.block-featured-projects { position: relative; }

.featured-section { background: linear-gradient(90deg, rgba(73,68,85,1) 0%, rgba(73,68,85,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); padding-bottom: 20rem; position: relative;}
.featured-section::before{content: ''; position: absolute; clip-path: polygon(0 0, 75% 0, 0 100%); height: 100%; width: 35%; background-color: #494455; mix-blend-mode: multiply;}
section.block-featured-projects .featured-section h3 {font-size: 9rem;line-height: 1;margin: 5rem 0 0 0;color: #fff;}
.container.loop-case-studies { margin-top: -35rem; }

.block-featured-projects .loop-case-studies .grid .col{background-color: #fff; position: relative; overflow: hidden;}
.block-featured-projects .loop-case-studies .grid .col .p2{padding-bottom: 9rem;}
.block-featured-projects .loop-case-studies .grid .col a{display: block;}
.block-featured-projects .loop-case-studies .grid .col h4{margin-bottom: 2rem;}
.block-featured-projects .loop-case-studies .grid .col a.button{position: absolute; bottom: 2rem; left: 2rem;}

.block-featured-projects .loop-case-studies .grid .col img{width: 100%; height: 250px; object-fit: cover;}

.acf-block-preview .block-featured-projects .featured-section h3{font-size: 4rem;}

.featured-section .container{position: relative;}

@media(max-width: 1024px){
    .block-featured-projects .featured-section{background: #494455; padding-bottom: 5rem; color: #fff;}
    .block-featured-projects .featured-section .grid{grid-template-columns: 1fr !important;}
    .block-featured-projects .featured-section .col.pb20{padding-bottom: 2rem !important;}
    .block-featured-projects .featured-section .col.p4{padding: 0 !important;}

    .container.loop-case-studies { margin-top: 5rem; }
}

@media(max-width: 768px){
    section.block-featured-projects .featured-section h3{font-size: 5rem;}
}