[data-template="investigation-summary"] main { position: relative; .panel-left{ width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5); } @media screen and (max-width: 1340px){ margin-left: auto; margin-right: calc(var(--padding-body)*3); .panel-left{ width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6); } } @media screen and (max-width: 1220px){ margin-left: auto; margin-right: 0px; width: calc(100% - var(--panel-w)*0.5 - var(--padding-body)); .panel-left{ width: calc(var(--panel-w)*0.5); } } .section__article { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); &:target{ padding-top: calc(var(--header-h) + var(--spacing)*1); } a:hover { color: var(--grey-200); } .section__title { font-weight: normal; text-transform: uppercase; margin-bottom: calc(var(--spacing) * 1); padding-right: 2ch; text-wrap: balance; } } #section__dl { margin-top: calc(var(--spacing) * 1.5); border-bottom: var(--border-light); .dl__group { @include grid-content(); border-top: var(--border-light); padding: calc(var(--spacing) * 0.5) 0; } dt { color: var(--color-txt-light); padding-right: 1ch; } ul:not(.keywords) { list-style: none; li { padding-bottom: 0.2em; } } } #section__synthese { max-width: var(--max-w-content); margin-inline: auto; p+p { margin-top: 0.5em; } h4 { margin-top: 2em; margin-bottom: 1em; font-size: var(--fs-normal); font-weight: normal; text-decoration: 1px underline var(--color-txt-light); text-underline-offset: 3px; } } .panel-left{ //background-color: yellow; height: calc(100vh - var(--header-h)); position: fixed; left: var(--padding-body); padding-bottom: calc(var(--padding-body)*1); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; z-index: calc(var(--z-header) - 1); #nav--page { padding-bottom: var(--spacing); width: calc(var(--panel-w)*0.5); ul { list-style: none; li { text-align: center; color: var(--color-txt-light); margin-bottom: 4px; font-weight: bold; font-size: var(--fs-small); a { display: block; padding: 5px 1ch; text-decoration: none; } } } } .btn--group{ width: calc(var(--panel-w)*0.5); display: flex; flex-direction: column; gap:calc(var(--spacing)*0.25); button, .dropdown{ flex-grow: 1; width: 100%; } } } } // SMALL ---------------------------------------------------------- // ---------------------------------------------------------------- @media #{$small} { [data-template="investigation-summary"] main { width: 100%; header { margin-bottom: calc(var(--spacing) * 1); } .section__article { margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); } #hero { figcaption { margin: 0 var(--padding-body); } } .panel-left { display: none; } } } @media #{$x-small} { [data-template="investigation-summary"] main { #section__dl .dl__group { column-gap: 1ch; font-size: var(--fs-small); padding: calc(var(--spacing) * 0.25) 0; } } }