#storybook { .mock-content { display: flex; min-height: 250px; height: 100%; .mock-image, .mock-copy { min-height: 100%; width: 100%; margin: 1em; } .mock-image { background: linear-gradient( to top right, transparent 0%, transparent 49%, $grey-blue 49%, $grey-blue 51%, transparent 51%, transparent 100% ), linear-gradient( to bottom right, transparent 0%, transparent 49%, $grey-blue 49%, $grey-blue 51%, transparent 51%, transparent 100% ); } .mock-copy { background: repeating-linear-gradient( to bottom, $grey-blue, $grey-blue 5px, transparent 5px, transparent 14px ); } .mock-vague { background: lighten($grey-blue, 15%); width: 100%; height: 100%; } } .mock-spacing { padding: 2em; } .annotation { font-size: 0.9rem; } }