33 lines
540 B
CSS
33 lines
540 B
CSS
.container {
|
|
isolation: isolate;
|
|
display: block grid;
|
|
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
block-size: 80cqb;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
background: linear-gradient(
|
|
calc(atan(var(--ratio))),
|
|
var(--surface-2) 20em,
|
|
transparent 90%
|
|
);
|
|
}
|
|
|
|
& > .background {
|
|
position: absolute;
|
|
inset: 0;
|
|
block-size: 100%;
|
|
inline-size: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
z-index: 0;
|
|
}
|
|
}
|