@import '../constants'; /* [3] List style -> container ---------------------------------*/ #CONTAINER > div.list{ display: flex; // flex properties flex-direction: column; justify-content: flex-start; & > *:first-child{ margin-top: 1em; } & > *:last-child{ margin-bottom: 3em; } /* (1) List element */ & > section{ display: block; margin: .3em 1em; padding: .8em 1em; border-radius: 5px / 5px; background-color: #fff; } /* (2) List title */ & > h1{ display: inline-block; margin: 0 1.2em; margin-top: .8em; font-size: inherit; color: darken($secondary-color, 5%); } /* (3) List separator */ & > hr{ display: block; position: relative; margin: 1em 1.5em; border: 0; border-bottom: 2px solid darken($bg-color, 5%); } }