.section-coloured-features .coloured-features{display:flex;margin-bottom:15px}.section-coloured-features header{text-align:center;padding:0 40px;max-width:1500px;margin:0 auto}.section-coloured-features header .heading{font-size:var(--font-size-48);margin-bottom:.6em;color:#3d6353}.section-coloured-features header .intro{font-size:var(--font-size-18);color:#4a505c;text-wrap:pretty;margin-bottom:40px}.section-coloured-features .coloured-feature{display:grid;color:#fff;border-radius:var(--border-radius-5);overflow:hidden;flex:1;text-align:center;width:49.25%;height:auto;margin-right:1.5%;transition:.5s}.section-coloured-features .coloured-feature:last-child{margin-right:0}.section-coloured-features .coloured-feature>*{grid-area:1/1}.section-coloured-features .coloured-feature>img{width:100%;height:100%;object-fit:cover;position:absolute}.section-coloured-features .coloured-feature::after{content:"";position:absolute;inset:-30% 0 0 0;background-color:rgba(0,0,0,.4);transition:.5s}.section-coloured-features .coloured-feature:nth-child(3n+1):hover{color:#4a505c}.section-coloured-features .coloured-feature:nth-child(3n+1):hover::after{background-color:#bde9c9}.section-coloured-features .coloured-feature:nth-child(3n+2):hover::after{background-color:#13294b}.section-coloured-features .coloured-feature:nth-child(3n):hover::after{background-color:#d16b54}.coloured-feature__content{align-self:start;position:relative;z-index:1;padding:15% 10%}.coloured-feature__content .heading{font-size:var(--font-size-24);margin-bottom:1em}.coloured-feature__content .desc{margin:0}@media screen and (max-width: 1200px){.section-coloured-features .coloured-feature{width:49.25%;flex:0 0 auto}}@media screen and (max-width: 1100px){.section-coloured-features header .heading{font-size:var(--font-size-32)}.section-coloured-features header .intro{font-size:var(--font-size-16)}}@media screen and (max-width: 749px){.section-coloured-features header{padding:0}.section-coloured-features header .heading{font-size:var(--font-size-24)}.section-coloured-features header .intro{font-size:var(--font-size-14);margin-bottom:20px}.section-coloured-features .coloured-feature__content .desc{font-size:var(--font-size-14)}}@media screen and (max-width: 650px){.section-coloured-features .coloured-feature{width:100% !important}}@media screen and (max-width: 500px){.section-coloured-features header .heading{font-size:var(--font-size-20)}}/*# sourceMappingURL=section-coloured-features.css.map */