header { [data-row] { position: var(--position, relative); box-shadow: var(--box-shadow); border-top: var(--borderTop); border-bottom: var(--borderBottom); > div { border-top: var(--borderTop); border-bottom: var(--borderBottom); } } [data-row*='top'] { z-index: 3; } [data-row*='middle'] { z-index: 2; } [data-row*='bottom'] { z-index: 1; } } // row container header [data-row*="boxed"] { box-shadow: none; background-image: none; background-color: transparent; > div { padding: var(--padding, 0 35px); box-shadow: var(--box-shadow); border-radius: var(--row-border-radius); @include media-breakpoint-down (sm) { --padding: 0 5vw; } @include media-breakpoint-only (md) { --padding: 0 4vw; } } }