index-main/assets/css/components/_card-impact.scss
Julie Blanc 1cc63b0725
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
impacts with keywords
2026-02-09 14:45:47 +01:00

85 lines
1.6 KiB
SCSS

.card--impact {
container-type: inline-size;
container-name: impact;
border: var(--border-light);
margin-bottom: calc(var(--padding-body)*1);
padding: var(--padding-inner);
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
gap: calc(var(--spacing)*0.25);
@include hover-card-line();
@include figure-3-1();
@include pin();
.title{
font-size: var(--fs-normal);
font-weight: 500;
text-transform: uppercase;
line-height: var(--leading-title);
padding-top: calc(var(--spacing)*0.5);
margin-right: 2ch;
}
.date{
font-size: var(--fs-small);
margin-top: calc(var(--spacing)*1.5);
}
.investigations{
text-decoration: none;
list-style: none;
li{
font-size: var(--fs-small);
color: var(--color-txt-light);
a{
text-decoration: none;
}
a::before{
content: ""
}
}
}
.card--open-graph{
width: 100%;
margin: calc(var(--spacing)*0.5) 0;
}
.pin{
position: absolute;
top: var(--padding-inner);
right: var(--padding-inner);
}
& > figure{
width: calc(100% + var(--padding-inner)*2);
position: relative;
left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1);
}
.tag{
position: relative;
top: 3px;
}
}
@media #{$small-up}{
.card--impact,
.grid-sizer{
width: calc(50% - 13px);
}
}