.campaignCard{container-type:inline-size}.campaignCard>a{display:grid;grid-template-areas:"image" "content";text-decoration:none;position:relative;box-shadow:0 4px 16px 0 rgba(12,12,12,.12);background:#fff;transition:box-shadow .15s;height:100%}.campaignCard>a>.wrap{grid-area:content;padding:24px}.campaignCard>a>.wrap header .heading{font-size:24px;line-height:1.33em;color:var(--colorPrimary);transition:color .15s}.campaignCard>a>.wrap header .heading:after{content:"";margin-left:4px;background:url("/klimaatplan-ui/images/icons/chevron-right.svg");height:20px;width:20px;background-size:contain;vertical-align:middle;display:inline-block;position:relative;top:-1px;left:0;transition:left .15s}.campaignCard>a>.wrap .main{margin-top:8px}.campaignCard>a>.wrap .main .textblock{color:var(--colorText)}.campaignCard>a>.wrap .main .textblock p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.campaignCard>a>.wrap footer .meta{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:8px;margin-top:16px;align-items:center}.campaignCard>a>.wrap footer .meta .date{color:var(--colorTextSubtle);font-size:14px;display:flex;gap:4px}.campaignCard>a>.wrap footer .meta .date:before{background:url("/klimaatplan-ui/images/icons/date.svg");width:20px;height:20px;content:"";display:inline-block}.campaignCard>a>.wrap footer .meta .location{color:var(--colorTextSubtle);font-size:14px;display:flex;gap:4px}.campaignCard>a>.wrap footer .meta .location:before{background:url("/klimaatplan-ui/images/icons/location.svg");width:20px;height:20px;content:"";display:inline-block}.campaignCard>a>picture{grid-area:image;height:240px;overflow:hidden}.campaignCard>a>picture img{object-fit:cover;height:100%;transition:transform .15s ease-in}.campaignCard.full>a>.wrap{position:relative}.campaignCard.full>a>.wrap>header{display:flex;flex-direction:column-reverse;gap:16px}.campaignCard.compact>a>.wrap footer .meta .tag{border-radius:20px}.campaignCard a:is(:hover,:focus){box-shadow:0 8px 24px 0 rgba(12,12,12,.12)}.campaignCard a:is(:hover,:focus)>.wrap>header>.heading{color:var(--colorPrimaryHover)}.campaignCard a:is(:hover,:focus)>.wrap header .heading:after{left:4px}.campaignCard a:is(:hover,:focus)>picture img{transform:scale(105%)}@container (min-width:580px){.campaignCard>a{grid-template-areas:"content image"}.campaignCard>a>picture{height:auto}.campaignCard>a>.wrap footer .meta .date{font-weight:700}.campaignCard>a>.wrap footer .meta .location{font-weight:700}.campaignCard.full>a{grid-template-columns:3fr 2fr}.campaignCard.compact>a{grid-template-columns:4fr 1fr}}