@pattern-lab/starterkit-handlebars-vanilla/dist/css/style.css

Pattern Lab Vanilla StarterKit for Handlebars.

@charset "UTF-8";
/*------------------------------------*\
    #TABLE OF CONTENTS
\*------------------------------------*/
/**
 * ABSTRACTS..............................Declarations of Sass variables & mixins
 * BASE...................................Default element styles
 * LAYOUT.................................Layout-specific styles
 * COMPONENTS.............................Component styles
 * UTILITIES..............................Utility classes
 */
/*------------------------------------*\
    #ABSTRACTS
\*------------------------------------*/
/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/
/**
 * CONTENTS
 *
 * COLORS
 * Brand Colors...............Globally-available variables and config
 * Neutral Colors.............Grayscale colors, including white and black
 * Utility Colors.............Info, Warning, Error, Success
 *
 * TYPOGRAPHY
 * Font Families..............The fonts used in the design system
 * Sizing.....................Font sizing
 *
 * LAYOUT
 * Max-widths.................Maximum layout container width
 *

 * SPACING
 * Spacing defaults...........Spacing between elements
 *
 * BORDERS
 * Border Width...............Border thicknesses
 * Border Radius..............Border radius definitions
 *
 * ANIMATION
 * Animation Speed............Transition/animation speed variables
 * Animation easing...........Easing variables
 *
 * BREAKPOINTS
 * Breakpoints................Global breakpoint definitions
 */
/*------------------------------------*\
     #COLORS
 \*------------------------------------*/
/**
 * Brand Colors
 * 1) Brand=specific colors
 */
/**
 * Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
/**
 * Utility Colors
 * 1) Utility colors are colors used to provide feedback, such as alert messages,
 *    form validation, etc.
 */
/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/
/**
 * Font Family
 */
/**
 * Font Sizing
 */
/**
 * Line Height
 */
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * Max Width
 */
/*------------------------------------*\
    #SPACING
\*------------------------------------*/
/**
 * Spacing and offsets
 * 1) Used to space grids and body padding
 */
/*------------------------------------*\
    #BORDERS
\*------------------------------------*/
/**
 * Border widths
 */
/**
 * Border radius
 */
/*------------------------------------*\
    #ANIMATION
\*------------------------------------*/
/**
 * Transition Speed
 */
/**
 * Transition Ease
 */
/*------------------------------------*\
    #BREAKPOINTS
\*------------------------------------*/
/**
 * Breakpoints used in media queries
 * 1) These are not the only breakpoints used, but they provide a few defaults
 */
/*------------------------------------*\
    #MIXINS
\*------------------------------------*/
/**
 * Body Styles 
 * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
 */
/**
 * XL Type Styles
 */
/**
 * XL Heading Styles
 */
/**
 * Large Heading Styles
 */
/**
 * Medium 2 Heading Styles
 */
/**
 * Medium Heading Styles
 */
/*------------------------------------*\
    #COLORS
\*------------------------------------*/
/**
 * In this file, we take the literal colors from our palette (defined in variables.scss)
 * and define them against variables that we can utilise anywhere throughout the project.
 */
/*------------------------------------*\
    #GLOBAL TEXT COLOR
\*------------------------------------*/
/**
 * Body text and background colors
 */
/**
 * Highlight colors
 */
/*------------------------------------*\
    #LINKS
\*------------------------------------*/
/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/*------------------------------------*\
    #FORMS
\*------------------------------------*/
/*------------------------------------*\
    #BASE
\*------------------------------------*/
/*------------------------------------*\
    #RESET
\*------------------------------------*/
/**
 * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
 */
* {
  box-sizing: border-box; }

/**
 * 1) Zero out margins and padding for elements
 */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0; }

/**
 * 1) Set HTML5 elements to display: block
 */
header, footer, nav, section, article, figure {
  display: block; }

/*------------------------------------*\
    #BODY
\*------------------------------------*/
/**
 * HTML base styles
 * 1) Set the html element's height to at least 100% of the viewport.
 *    This is used to achieve a sticky footer
 */
html {
  min-height: 100vh;
  /* 1 */ }

/**
 * Body base styles
 * 1) Set the body element's height to at least 100% of the viewport.
 *    This is used to achieve a sticky footer
 */
body {
  min-height: 100vh;
  /* 1 */
  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* 1 */
  background-color: #fff;
  color: #131313; }

/*------------------------------------*\
    #LINKS
\*------------------------------------*/
/**
 * Link base styles
 */
a {
  color: #444;
  text-decoration: none;
  outline: 0;
  transition: color 0.15s ease-out; }
  a:hover, a:focus {
    color: #808080; }
  a:active {
    color: #131313; }
  a:visited {
    color: #131313; }

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
/**
 * 1) List base styles
 */
/**
  * Remove list styles from unordered and ordered lists
  */
ol, ul {
  list-style: none; }

/*------------------------------------*\
    #HEADINGS
\*------------------------------------*/
/**
 * Heading 1 base styles
 */
h1 {
  font-size: 3rem;
  font-weight: normal;
  line-height: 1.2; }

/**
 * Heading 2 base styles
 */
h2 {
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.2; }

/**
 * Heading 3 base styles
 */
h3 {
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.2; }

/**
 * Heading 4 base styles
 */
h4 {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.2; }

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
/**
 * 1) Form element base styles
 */
/**
 * Input placeholder text base styles
 */
::-webkit-input-placeholder {
  color: #808080; }

::-moz-placeholder {
  color: #808080; }

:-ms-input-placeholder {
  color: #808080; }

/**
 * Fieldset base styles
 */
fieldset {
  border: 0;
  padding: 0;
  margin: 0; }

/**
 * Legend base styles
 */
legend {
  margin-bottom: 0.25rem; }

/**
 * Label base styles
 */
label {
  display: block;
  padding-bottom: 0.25rem;
  color: #131313; }

/**
 * Add font size 100% of form element and margin 0 to these elements
 */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  margin: 0; }

/**
 * Text area base styles
 */
textarea {
  resize: none; }

/**
 * Input  and text area base styles
 */
input,
textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  background: #fff; }
  input:focus,
  textarea:focus {
    border-color: #131313; }

/**
 * Remove webkit appearance styles from these elements
 */
input[type="text"],
input[type="search"],
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="url"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  display: block; }

/**
 * Checkbox and radio button base styles
 */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.3rem;
  border-color: #444; }

/**
 * Search input base styles
 */
input[type="search"] {
  -webkit-appearance: none;
  border-radius: 0; }

/**
 * Select
 * 1) Remove default styling
 */
select {
  display: block;
  font-size: 1rem;
  width: 100%;
  border: 1px solid #444;
  padding: 0.5rem;
  background: #fff;
  color: #131313; }
  select:focus {
    border-color: #131313; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/**
 * Button and submit inputs reset
 * 1) These should be styled using c-btn
 */
button {
  cursor: pointer; }

/*------------------------------------*\
    #MAIN ELEMENT
\*------------------------------------*/
/**
 * Main element
 */
[role=main] {
  display: block;
  padding: 1rem; }

/*------------------------------------*\
    #MEDIA
\*------------------------------------*/
/**
 * Responsive image styling
 * 1) Allows for images to flex with varying screen size
 */
img {
  max-width: 100%;
  height: auto; }

/*------------------------------------*\
    #TEXT
\*------------------------------------*/
/**
 * Paragraph base styles
 */
p {
  margin-bottom: 1rem; }

/**
 * Blockquote base styles
 */
blockquote {
  font-style: italic;
  border-left: 1px solid #808080;
  color: #808080;
  padding-left: 1rem;
  margin-bottom: 1rem; }

/**
 * Horizontal rule base styles
 */
hr {
  border: 0;
  height: 1px;
  background: #808080;
  margin: 1rem 0; }

/**
 * Selection styles
 */
::-moz-selection {
  color: #131313;
  background: #ddd;
  /* Gecko Browsers */ }

::selection {
  color: #131313;
  background: #ddd;
  /* WebKit/Blink Browsers */ }

/**
 * Code base styles
 */
code {
  display: inline-block;
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 0.2rem 0.5rem;
  line-height: 1.2;
  font-size: 0.85rem; }

/**
 * Preformatted text base styles
 */
pre {
  background: #f9f9f9;
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 1rem;
  overflow-x: auto;
  /**
	 * Remove border from code within preformatted text block
	 */ }
  pre code {
    border: 0; }

/**
 * Code with languages associated with them
 * 1) Override Prism sysles for code blocks with language
 */
code[class*="language-"],
pre[class*="language-"] {
  font-family: monospace !important; }

/*------------------------------------*\
    #TABLES
\*------------------------------------*/
/**
 * Table
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

/**
 * Table header cell
 */
th {
  text-align: left; }

/**
 * Table row
 */
tr {
  vertical-align: top; }

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 *
 * 1) This caps the width of text passages
 *    to achieve a comfortable line length
 */
.l-linelength-container {
  max-width: 36rem; }

/*------------------------------------*\
    #GRID
\*------------------------------------*/
/*------------------------------------*\
    #UTILITIES
\*------------------------------------*/
/*------------------------------------*\
    #VISIBILITY CLASSES
\*------------------------------------*/
/**
 * Is Hidden
 * 1) Completely remove from the flow and screen readers.
 */
.u-is-hidden {
  display: none !important;
  visibility: hidden !important; }

/**
 * Is Visibly Hidden
 * 1) Completely remove from the flow but leave available to screen readers.
 */
.u-is-vishidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

/*------------------------------------*\
    #SPACING
\*------------------------------------*/
/**
 * Margin bottom none
 * 1) Force margin bottom of 0
 */
.u-margin-bottom-none {
  margin-bottom: 0 !important; }

/**
 * Margin bottom small
 * 1) Force margin bottom of $spacing-small variable
 */
.u-margin-bottom-small {
  margin-bottom: 1rem !important; }

/**
 * Margin bottom
 * 1) Force margin bottom of $spacing variable
 */
.u-margin-bottom {
  margin-bottom: 1rem !important; }

/**
 * Margin bottom large
 * 1) Force margin bottom of $spacing-large variable
 */
.u-margin-bottom-large {
  margin-bottom: 2rem !important; }

.u-margin-bottom-large-to-xxl {
  margin-bottom: 2rem !important; }
  @media all and (min-width: 60em) {
    .u-margin-bottom-large-to-xxl {
      margin-bottom: 8rem !important; } }

/**
 * Margin top none
 * 1) Force margin top of 0
 */
.u-margin-top-none {
  margin-top: 0 !important; }

/**
 * Margin top small
 * 1) Force margin top of $spacing-small variable
 */
.u-margin-top-small {
  margin-top: 1rem !important; }

/**
 * Margin top
 * 1) Force margin top of $spacing variable
 */
.u-margin-top {
  margin-top: 1rem !important; }

/**
 * Margin top large
 * 1) Force margin top of $spacing-large variable
 */
.u-margin-top-large {
  margin-top: 2rem !important; }

.u-margin-top-booking {
  margin-top: 28rem !important; }

/**
 * Margin right none
 * 1) Force margin right of 0
 */
.u-margin-right-none {
  margin-right: 0 !important; }

/**
 * Margin right small
 * 1) Force margin right of $spacing-small variable
 */
.u-margin-right-small {
  margin-right: 1rem !important; }

/**
 * Margin right
 * 1) Force margin right of $spacing variable
 */
.u-margin-right {
  margin-right: 1rem !important; }

/**
 * Margin right large
 * 1) Force margin right of $spacing-large variable
 */
.u-margin-right-large {
  margin-right: 2rem !important; }

/**
 * Margin left none
 * 1) Force margin left of 0
 */
.u-margin-left-none {
  margin-left: 0 !important; }

/**
 * Margin left small
 * 1) Force margin left of $spacing-small variable
 */
.u-margin-left-small {
  margin-left: 1rem !important; }

/**
 * Margin left
 * 1) Force margin left of $spacing variable
 */
.u-margin-left {
  margin-left: 1rem !important; }

/**
 * Margin left large
 * 1) Force margin left of $spacing-large variable
 */
.u-margin-left-large {
  margin-left: 2rem !important; }

/**
 * Center display block contents
 */
.u-margin-center {
  margin: 0 auto !important; }

/**
 * Padding none
 */
.u-padding-none {
  padding: 0 !important; }

/**
 * Padding small
 */
.u-padding-small {
  padding: 1rem !important; }

/**
 * Padding
 */
.u-padding {
  padding: 1rem !important; }

/**
 * Padding large
 */
.u-padding-large {
  padding: 2rem !important; }

/**
 * Padding top none
 */
.u-padding-top-none {
  padding-top: 0 !important; }

/**
 * Padding top small
 */
.u-padding-top-small {
  padding-top: 1rem !important; }

/**
 * Padding top
 */
.u-padding-top {
  padding-top: 1rem !important; }

/**
 * Padding top large
 */
.u-padding-top-large {
  padding-top: 2rem !important; }

/**
 * Padding bottom none
 */
.u-padding-bottom-none {
  padding-bottom: 0 !important; }

/**
 * Padding bottom small
 */
.u-padding-bottom-small {
  padding-bottom: 1rem !important; }

/**
 * Padding bottom
 */
.u-padding-bottom {
  padding-bottom: 1rem !important; }

/**
 * Padding bottom large
 */
.u-padding-bottom-large {
  padding-bottom: 2rem !important; }

/**
 * Padding right none
 */
.u-padding-right-none {
  padding-right: 0 !important; }

/**
 * Padding right small
 */
.u-padding-right-small {
  padding-right: 1rem !important; }

/**
 * Padding right
 */
.u-padding-right {
  padding-right: 1rem !important; }

/**
 * Padding right large
 */
.u-padding-right-large {
  padding-right: 2rem !important; }

/**
 * Padding left none
 */
.u-padding-left-none {
  padding-left: 0 !important; }

/**
 * Padding left small
 */
.u-padding-left-small {
  padding-left: 1rem !important; }

/**
 * Padding left
 */
.u-padding-left {
  padding-left: 1rem !important; }

/**
 * Padding left large
 */
.u-padding-left-large {
  padding-left: 2rem !important; }

/*------------------------------------*\
    #COMPONENTS
\*------------------------------------*/
/*------------------------------------*\
    #ICON
\*------------------------------------*/
/**
 * 1) Small image that represents functionality
 */
.c-icon {
  height: 1rem;
  width: 1rem; }

/*------------------------------------*\
    #CARD
\*------------------------------------*/
/**
 * A collection of text and/or images and/or other smaller content 
 */
.c-card {
  display: block;
  border: 1px solid #bbb;
  padding: 1rem;
  max-width: 27rem;
  transition: all 0.15s ease-out; }
  .c-card:hover, .c-card:focus {
    border-color: #666;
    background: #f9f9f9; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/**
 *
 * 1) Button or link that has functionality to it
 */
.c-btn {
  display: inline-block;
  border: 1px solid #131313;
  border-radius: 8px;
  background: #444;
  color: #fff;
  line-height: 1;
  font-weight: bold;
  padding: 1rem 2rem;
  border: 0;
  text-align: center;
  transition: all 0.15s ease-out; }
  .c-btn:hover, .c-btn:focus {
    background: #808080; }

/*
 * Inner container wrapper
 * 1) Container is direct decendant of <button>, since there's
 *    a bug with applying flexbox directly to a <button>
 * 2) Only needs to be used for buttons containing both icons and text
 */
.c-btn__inner {
  display: flex;
  align-items: center;
  justify-content: center; }

/*
 * Button icon
 */
.c-btn__icon {
  width: 1rem;
  height: 1rem;
  fill: #fff;
  transition: fill 0.15s ease-out; }

/*------------------------------------*\
    #FIELDS
\*------------------------------------*/
/**
 * 1) Consists of a label, form control, and an optional note about the field.
 */
.c-field {
  margin-bottom: 2rem; }

/**
 * Field label
 */
.c-field__label {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: bold; }

/**
 * Field body
 */
.c-field__body {
  position: relative; }

/**
 * Field note
 */
.c-field__note {
  display: inline-block;
  font-size: 0.75rem;
  color: #808080; }

/*------------------------------------*\
    #LOGO
\*------------------------------------*/
/**
 * Branding image or text of the site
 */
.c-logo {
  max-width: 14rem; }

/**
 * Logo link
 */
.c-logo__link {
  display: block; }

/**
 * Logo image
 */
.c-logo__img {
  display: block; }

/*------------------------------------*\
    #GRID
\*------------------------------------*/
/**
 * Primary Grid  
 */
.l-grid {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  margin-bottom: 2rem; }

/*------------------------------------*\
    #LAYOUT CONTAINER
\*------------------------------------*/
/**
 * Layout Container
 * 1) Caps the width of the content to the maximum width
 *    and centers the container
 */
.l-container {
  max-width: 60rem;
  margin: 0 auto; }

.c-footer-nav {
  display: flex; }

.c-footer-nav__item {
  margin-right: 2rem; }

/*------------------------------------*\
    #PRIMARY NAVIGATION
\*------------------------------------*/
/**
 * Primary navigation existing in the header and maybe the footer
 */
.c-primary-nav {
  margin-left: auto; }

/**
 * Primary navigation list
 */
.c-primary-nav__list {
  display: flex; }

/**
 * Primary navigation item
 */
.c-primary-nav__item {
  margin-left: 2rem; }

/**
 * Primary navigation link
 */
.c-primary-nav__link {
  display: block;
  padding: 0.5rem 0;
  cursor: pointer; }

/*------------------------------------*\
    #PAGE HEADER
\*------------------------------------*/
/**
 * 1) Container that consists of of a page header title and description
 */
/**
 * Page header title
 */
.c-page-header__title {
  margin-bottom: 0; }

/**
 * Page description
 */
.c-page-header__description {
  font-size: 1.2rem;
  margin-bottom: 2rem; }

/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
/**
 * 1) Global block at the bottom of each page that contains a navigation and other information
 */
.c-footer {
  margin-top: 2rem;
  padding: 1rem;
  background: #eee; }

/*------------------------------------*\
    #HEADER
\*------------------------------------*/
/**
 * Global block at the top of each page containing the navigation, logo, and other potential contents
 */
.c-header {
  position: relative;
  background: #eee;
  padding: 1rem;
  margin-bottom: 2rem; }

/**
 * Header inner
 */
.c-header__inner {
  display: flex;
  align-items: center; }

/**
 * Header navigation button
 * 1) Button used to toggle the navigation on/off on small screens
 */
.c-header__nav-btn {
  margin-left: auto; }
  @media all and (min-width: 70em) {
    .c-header__nav-btn {
      display: none; } }

/**
 * Header navigation conntainer
 * 1) Contains the primary navigation and other possible patterns
 */
.c-header__nav-container {
  display: none;
  /**
	 * Header navigation conntainer within vertical header
	 */ }
  @media all and (min-width: 70em) {
    .c-header__nav-container {
      display: block;
      margin-left: auto; } }
  @media all and (min-width: 70em) {
    .c-header--vertical .c-header__nav-container {
      margin-left: 0; } }

/**
 * Active header nav container
 */
.c-header__nav-container.is-active {
  display: block;
  position: absolute;
  background: #eee;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 5;
  padding: 1rem;
  /**
	 * Active header nav container within vertical header
	 */ }
  @media all and (min-width: 70em) {
    .c-header__nav-container.is-active {
      display: block;
      position: static;
      padding: 0;
      margin-left: auto;
      width: inherit; } }
  @media all and (min-width: 70em) {
    .c-header--vertical .c-header__nav-container.is-active {
      margin-left: 0;
      width: 100%; } }

/*------------------------------------*\
    #CARD LIST
\*------------------------------------*/
/**
 * An unordered list of cards 
 */
.c-card-list {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/*------------------------------------*\
    #SECTION
\*------------------------------------*/
/**
 * 1) Discrete section
 */
.c-section {
  margin-bottom: 2rem; }

/*------------------------------------*\
	#TABLE
\*------------------------------------*/
/**
 * 1) Data Table
 */
.c-table {
  margin-bottom: 1rem;
  min-width: 600px;
  /* 2 */ }

/**
 * Table Header
 */
.c-table__header {
  background: #eee; }

/**
 * Table Header Cell
 */
.c-table__header-cell {
  padding: 0.8rem; }

/**
 * Table Row
 */
.c-table__row {
  border-bottom: 1px solid #eee; }

/**
 * Table Cell
 */
.c-table__cell {
  padding: 1.6rem 0.8rem; }

/**
 * Table Footer
 */
/**
 * Table Footer Cell
 */
.c-table__footer-cell {
  padding: 0.8rem; }

/*------------------------------------*\
    #TEXT PASSAGE
\*------------------------------------*/
/**
 * 1) A passage of text, including various components (i.e. article, blog post)
 */
.c-text-passage {
  /**
	 * Link within the text passage
	 */
  /**
	 * Blockquote within text passage
	 */
  /**
	  * First-level heading within text passage
	  */
  /**
	 * Second-level heading within text passage
	 */
  /**
	 * Third-level heading within text passage
	 */
  /**
	 * Fourth-level heading within text passage
	 */
  /**
	 * Fifth-level heading within text passage
	 */
  /**
	 * Sixth-level heading within text passage
	 */
  /**
	 * Unordered list within text passage
	 */
  /**
	 * Ordered list within text passage
	 */ }
  .c-text-passage p {
    margin-bottom: 1rem; }
  .c-text-passage a {
    text-decoration: underline; }
  .c-text-passage blockquote {
    padding-left: 0.8rem;
    border-left: 3px solid #444;
    color: #808080;
    font-size: 1rem; }
  .c-text-passage h1 {
    margin-bottom: 1rem; }
  .c-text-passage h2 {
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .c-text-passage h3 {
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .c-text-passage h4 {
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .c-text-passage h5 {
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .c-text-passage h6 {
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .c-text-passage ul {
    list-style: disc;
    margin-left: 1rem;
    margin-bottom: 1rem; }
    .c-text-passage ul li:last-child {
      margin-bottom: 0; }
  .c-text-passage ol {
    list-style: decimal;
    margin-left: 1rem;
    margin-bottom: 1rem; }
    .c-text-passage ol li:last-child {
      margin-bottom: 0; }
  .c-text-passage li {
    margin-bottom: 0.5rem;
    line-height: 1.6; }