github.com/uchennaokeke444/nomad@v0.11.8/website/components/basic-hero/style.css (about) 1 .g-basic-hero { 2 padding: 88px 0; 3 4 & .g-type-display-1 { 5 color: var(--gray-1); 6 text-align: center; 7 margin-left: auto; 8 margin-right: auto; 9 margin-top: 0; 10 max-width: 14em; 11 } 12 13 & .g-type-body-large { 14 color: var(--gray-3); 15 margin: 0 auto 0 auto; 16 text-align: center; 17 max-width: 40em; 18 } 19 20 & .links { 21 display: flex; 22 flex-wrap: wrap; 23 justify-content: center; 24 /* 25 * Margins here compensate for extra 8px margin on buttons 26 * which are needed to center and space properly regardless of whether 27 * buttons are wrapping to multiple lines or not. 28 */ 29 margin-top: calc(32px - 8px); 30 margin-bottom: -8px; 31 @media (--large) { 32 margin-top: calc(40px - 8px); 33 } 34 35 & .g-btn { 36 /* 37 * This ensures 16px between buttons at all times, while maintaining proper centering 38 * when buttons wrap to multiple lines. 39 * There will be an extra 8px space on all sides of the button group. 40 * The top and bottom are accounted for by the -8px adjustment on `.action` margins. 41 * The left and right excess is left as is - it's needed for proper centering when wrapping. 42 */ 43 margin: 8px; 44 } 45 } 46 }