@import "breakpoint-helpers"
@import "colors"
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')

.site-footer
  overflow: hidden
  background-color: $colorblind-fg
  padding: 15px 10px
  font-family: "Fira Code", monospace
  border-radius: 3px
  font-size: small

  h6
    font-size: medium
    margin-top: 0px
    margin-bottom: 0px

  [class*="col-"]
    float: left
    padding: 15px 15px 0px
    position: relative

  /* For desktop: */
  .col-1
    width: 8.33%

  .col-2
    width: 16.66%

  .col-3
    width: 25%

  .col-4
    width: 33.33%

  .col-5
    width: 41.66%

  .col-6
    width: 50%

  .col-7
    width: 58.33%

  .col-8
    width: 66.66%

  .col-9
    width: 75%

  .col-10
    width: 83.33%

  .col-11
    width: 91.66%

  .col-12
    width: 100%


  @include respond-below(sm)
    [class*="col-"]
      width: 95%


.footer-grid
  box-sizing: border-box
  position: relative

.footer-grid::after
  content: ""
  clear: both
  display: table