@layer components{.activity{--title-col:var(--col-dark);--subtitle-col:var(--col-dark);--text-col:var(--subtitle-col);--bg-col:var(--col-gray);--icon-size:6.5rem;--title-height:4rem;--mask-height:10px;--mask-url:url(/images/activities/mask-plumbing.svg);display:flex;flex-direction:column;border-radius:var(--size-md);color:var(--text-col);background-color:var(--bg-col);box-shadow:0 0 var(--size-sm) var(--size-sm) var(--section-col-bg);&.activity--plumbing{--title-col:color-mix(in srgb,var(--col-blue) 75%,var(--col-dark));--subtitle-col:var(--col-white);--bg-col:color-mix(in srgb,var(--col-blue) 87.5%,var(--col-white));--mask-url:url(/images/activities/mask-plumbing.svg)}&.activity--heating{--title-col:color-mix(in srgb,var(--col-red) 75%,var(--col-dark));--subtitle-col:var(--col-white);--bg-col:color-mix(in srgb,var(--col-red) 87.5%,var(--col-white));--mask-url:url(/images/activities/mask-heating.svg)}&.activity--repair{--title-col:color-mix(in srgb,var(--col-yellow) 33%,var(--col-brown));--subtitle-col:var(--col-brown);--bg-col:color-mix(in srgb,var(--col-yellow) 55%,var(--col-white));--mask-url:url(/images/activities/mask-repair.svg)}&.activity--maintenance{--title-col:var(--col-dark-blue);--subtitle-col:color-mix(in srgb,var(--col-dark-blue),var(--col-dark));--bg-col:color-mix(in srgb,var(--col-dark-blue) 20%,var(--col-white));--mask-url:url(/images/activities/mask-maintenance.svg);.activity__header{&:before{background-image:linear-gradient(to top,color-mix(in srgb,var(--col-dark) 38%,transparent),transparent 5rem)}}}&.activity--heating,&.activity--plumbing{font-weight:var(--font-normal)}}.activity__header{position:relative;&:before,.activity__img{-webkit-mask-image:linear-gradient(white),var(--mask-url);mask-image:linear-gradient(white),var(--mask-url);-webkit-mask-size:100% calc(100% - var(--mask-height)),300px var(--mask-height);mask-size:100% calc(100% - var(--mask-height)),300px var(--mask-height);-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:top,bottom right;mask-position:top,bottom right}&:before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(to top,color-mix(in srgb,var(--col-black) 62%,transparent),transparent 5rem)}}.activity__img{position:relative;width:100%;height:18rem;object-fit:cover;border-top-left-radius:var(--size-md);border-top-right-radius:var(--size-md)}.activity__title{display:flex;z-index:1;align-items:center;height:var(--title-height);position:absolute;bottom:calc((var(--title-height) - var(--mask-height)) / -2);padding-block:.4rem;padding-inline:5.5rem var(--size-md);color:var(--title-col);background-color:var(--col-white);border-top-right-radius:var(--size-xs);border-bottom-right-radius:var(--size-xs)}.activity__title-icon{position:absolute;inset-inline-start:calc(-1 * var(--icon-size) / 3);width:var(--icon-size);height:var(--icon-size)}.activity__title-text{text-transform:uppercase;translate:0 .1rem}.activity__main{font-size:var(--text-sm);padding:var(--size-md);-webkit-padding-before:calc(var(--title-height) / 2 + var(--size-xs));padding-block-start:calc(var(--title-height) / 2 + var(--size-xs));p:not(:last-child){-webkit-margin-after:var(--size-xxs);margin-block-end:var(--size-xxs)}}.activity__subtitle{line-height:var(--reduced-line-height);color:var(--subtitle-col);font-weight:var(--font-bold);font-size:var(--text-md);-webkit-margin-after:var(--size-xs);margin-block-end:var(--size-xs)}}@layer components{.section.section--activities{@media (max-width:639px){-webkit-padding-before:var(--size-lg);padding-block-start:var(--size-lg)}.section__title{-webkit-margin-before:var(--size-lg);margin-block-start:var(--size-lg)}}.activities{display:grid;grid-template-columns:repeat(4,1fr);@media (min-width:640px){gap:0 var(--size-lg);.activity:nth-child(odd){-webkit-margin-before:var(--size-lg);margin-block-start:var(--size-lg)}.activity:nth-child(2n){-webkit-margin-after:var(--size-lg);margin-block-end:var(--size-lg)}}@media (max-width:1279px){grid-template-columns:repeat(2,1fr)}@media (max-width:639px){gap:var(--size-lg);grid-template-columns:repeat(1,1fr);.activity:first-child{-webkit-margin-before:var(--size-lg);margin-block-start:var(--size-lg)}}}}