index-main/assets/css/components/_investigation-hero.scss

99 lines
2.4 KiB
SCSS
Raw Normal View History

2026-02-18 18:17:48 +01:00
#investigation__hero{
width: 100%;
2026-01-08 16:12:39 +01:00
position: relative;
2026-02-18 17:51:48 +01:00
left: 0;
2026-02-18 18:17:48 +01:00
padding-top: calc(var(--spacing)*4);
2026-02-18 17:51:48 +01:00
margin-bottom: calc(var(--spacing)*3);
max-width: var(--max-w-cards);
margin-inline: auto;
2026-01-13 10:29:55 +01:00
2026-01-08 16:12:39 +01:00
figcaption{
color: var(--color-txt-light);
font-size: var(--fs-small);
@media #{$x-small}{ font-size: var(--fs-xsmall); }
padding: calc(var(--spacing)*0.5) var(--padding-body);
padding-bottom: 0;
2026-02-18 17:51:48 +01:00
text-align: center;
width: var(--max-w-content);
margin-inline: auto;
2026-01-08 16:12:39 +01:00
}
figure{
width: 100%;
position: relative;
img{
width: 100%;
aspect-ratio: 2/1;
object-fit: cover;
}
}
.player-container{
width: 100%;
position: relative;
aspect-ratio: 2/1;
.extract, video{
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.video-full{
width: 100%;
height: 100%;
iframe{
width: 100%;
height: 100%;
}
display: none;
}
#hero-play-video{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
.btn--bold{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 1ch;
opacity: 0.8;
&:hover{
opacity: 1;
}
}
.text{
color: black;
line-height: 1;
padding-top: 4px;
}
svg{
width: 18px;
height: 18px;
fill: black;
opacity: 0.8;
}
}
}
}