#section__video{ margin-bottom: calc(var(--spacing)*2); .btn__deploy{ margin-top: calc(var(--spacing)*1); --size: var(--h-block); font-family: var(--font); font-size: var(--fs-small); font-weight: var(--fw-normal); line-height: 1; border: var(--border-light); height: var(--size); border-radius: calc(var(--size)/2); padding-left: 1.5ch; padding-right: 2ch; padding-top: 1px; position: relative; cursor: pointer; display: flex; align-items: center; gap: 1ch; // padding-right: 0.5ch; font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; svg{ fill: var(--color-txt); width: 10px; position: relative; top: 1px; left: 1px; } } .videos__ul{ list-style: none; width: 100%; margin-top: calc(var(--spacing)*1); display: none; .videos__li{ display: flex; align-items: center; justify-content: flex-start; gap: 1ch; margin-bottom: calc(var(--spacing)*0.5); cursor: pointer; .icon{ --size: 20px; width: var(--size); height: var(--size); border-radius: calc(var(--size)/2); border: var(--border); display: flex; align-items: center; justify-content: center; } svg{ fill: var(--color-txt); width: 7px; } } } #videos__input{ display: none } #videos__input:checked ~ .videos__ul{ display: block; } } #video__fullscreen{ width: 100vw; height: 100vh; background-color: var(--color-bg); padding: var(--padding-body); position: fixed; top: 0px; left: 0; z-index: 3000; iframe{ width: 90%; height: 100%; border: var(--border); } #video__close{ height: 10%; font-size: 20px; width: 100%; font-weight: bold; display: flex; align-items: top; justify-content: flex-end; } } body.is-fullscreen{ overflow: hidden; }