#investigation__content { padding-top: calc(var(--spacing) * 4); .section-content { // min-height: calc(100vh - var(--header-h)); padding-left: calc(var(--padding-body)*1.5); padding-right: calc(var(--padding-body)*1.5); margin-bottom: calc(var(--spacing)*6); &:target{ padding-top: calc(var(--header-h) + var(--spacing)*2); @media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); } } } .section-title { max-width: var(--max-w-content); margin-inline: auto; margin-bottom: calc(var(--spacing)*2); font-size: var(--fs-medium); font-weight: 500; // text-transform: uppercase; text-wrap: balance; max-width: var(--max-w-content); } .section-txt{ max-width: var(--max-w-content); margin-inline: auto; } .subsection-w-media{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-body); margin-bottom: calc(var(--spacing)*4); margin-top: calc(var(--spacing)*2); position: relative; .media{ margin-inline: auto; max-width: var(--max-w-content); padding-left: var(--padding-inner); padding-right: var(--padding-inner); position: sticky; top: calc(var(--header-h) + var(--spacing)); align-self: start; } } .subsection-txt { min-height: calc(100vh - var(--header-h)); max-width: var(--max-w-content); padding-left: var(--padding-inner); padding-right: var(--padding-inner); padding-bottom: calc(var(--spacing)*6); } .subsection-w-hscroll{ position: relative; margin-bottom: calc(var(--spacing)*4); .horizontal-scroll{ height: 100vh; width: 100vw; overflow: hidden; display: flex; align-items: center; } .horizontal-scroll-wrapper{ display: flex; flex-wrap: nowrap; will-change: transform; } .horizontal-scroll-slide{ flex-shrink: 0; width: 90vw; max-width: 700px; padding: 0 calc(var(--spacing) * 1); figure, img{ width: 100%; } } .horizontal-scroll-pagination{ position: fixed; bottom: calc(var(--spacing) * 2); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } } p { margin: calc(var(--spacing)*0.75) 0; } ul { padding-left: 3ch; li{ margin: calc(var(--spacing)*0.5) 0; } } } .investigation__content:target { padding-top: calc(var(--header-h)*2 + var(--spacing)) !important; } .media{ video{ width: 100%; } figure{ height: auto; } .caption{ font-size: var(--fs-small); color: var(--color-txt-light); font-weight: 500; line-height: 1.1; } .swiper{ width: calc(100% - 60px); max-width: 600px; } }