.toggle-btns { position: sticky; } button.toggle.open:not(.see-more) { font-weight: bold; } button.toggle.left::after { margin-left: var(--unit--horizontal); } button.toggle.left.close::after { content: "+"; } button.toggle.left.open::after { content: "-"; } button.toggle.right::before { margin-right: var(--unit--horizontal); } button.toggle.right.close::before { content: "+"; } button.toggle.right.open::before { content: "-"; } #tabs { position: relative; margin-top: -25svh; margin-bottom: 30svh; transition: margin-top 0.5s ease-in-out; z-index: 1; } #tabs.open { margin-bottom: calc(3 * var(--unit--vertical)); } .active-tab { max-height: 65svh; overflow: auto; margin-top: var(--unit--vertical); transition: max-height 0.5s ease-in-out; } /* ================= SCROLLBAR ================= */ /* Works on Firefox */ .active-tab { scrollbar-width: thin; scrollbar-color: #fff transparent; } /* Works on Chrome, Edge, and Safari */ .active-tab::-webkit-scrollbar { width: 3px; height: auto; } .active-tab::-webkit-scrollbar-track { background: transparent; } .active-tab::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 1px; border: none; } .page-cover.open .active-tab { height: calc(100svh - 7.5 * var(--unit--vertical)); } .texts__year.short .year__edito { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .texts__year .see-more { width: 100%; margin-top: calc(var(--unit--vertical) / 2); } @media screen and (min-width: 640px) { #home #tabs { margin-top: calc(0px - (10 * var(--unit--vertical))); } button.toggle.left::after { margin-left: calc(var(--unit--horizontal) / 2); } button.toggle.right::before { margin-right: calc(var(--unit--horizontal) / 2); } }