--- --- /* Mixins */ @mixin for-tablet-up { @media (min-width: 640px) { @content; } } /* General */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font-family: "Rubik", sans-serif; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: currentColor; } .section { display: flex; flex-direction: column; align-items: center; padding: 4rem 0; } .container { width: 90%; max-width: 64rem; } .button { display: inline-block; padding: 1rem 1.5rem; border-radius: 0.375rem; border: 1px solid transparent; } .button-primary { color: white; background-color: black; } .button-secondary { border-color: black; } /* Header */ .header { border-bottom: 1px solid black; text-align: center; @include for-tablet-up { text-align: left; } } .header-container { display: flex; flex-direction: column; justify-content: space-between; @include for-tablet-up { flex-direction: row; align-items: center; } } .title { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 300; } .description { margin: 0; } .header-button-group { display: flex; flex-direction: column; margin-top: 4rem; @include for-tablet-up { flex-direction: row-reverse; margin-top: 0; .button { margin-left: 1rem; } } .button + .button { margin-top: 1rem; @include for-tablet-up { margin-top: 0; } } } /* Icons */ .icons-container { display: flex; flex-wrap: wrap; justify-content: center; } .feather-icon { display: inline-block; width: 1.5rem; height: 1.5rem; margin: 1rem; stroke-width: 2px; > svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: inherit; } } /* Request */ .request { background-color: lightgray; } .request-container { display: flex; flex-direction: column; align-items: center; } .request-heading { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: 400; text-align: center; }