25 lines
843 B
CSS
25 lines
843 B
CSS
/* Hero-dominant: a wide 16:9 image rather than the square cover used on track detail. */
|
|
.session-detail-hero {
|
|
margin: 0 auto 2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* session-detail-hero-img rides on MudPaper (child Razor component); ::deep pierces its output. */
|
|
::deep .session-detail-hero-img {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* Secondary medium square cover sitting below the hero — same 220px frame as mix detail,
|
|
smaller than the cut cover so the hero stays dominant. The cover-art MudPaper fills it. */
|
|
.session-detail-cover {
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 220px;
|
|
margin: 0 auto 2rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
|
|
}
|