/* Responsive images */

.img-responsive
  overflow: hidden

  img
    width: 100%

/* Profile image */

.img-rounded
  border-radius: 50%


/* Custom HR */

hr
  margin-top: 1rem
  margin-bottom: 1rem
  border: 0
  border-top: 1px solid lighten($dark, 50%)

/* Custom padding classes */

.padding-1
  padding: 0 1em

.padding-2
  padding: 0 2em

.padding-3
  padding: 0 3em


.width-25
  width: 25%

.width-50
  width: 50%

.width-75
  width: 75%

.width-100
  width: 100%

.justify-content-center
  justify-content: center

.align-items-center
  align-items: center

.align-content-center
  align-content: center

@each $variation in $variations
  .border-bottom-#{$variation} > li
    border-bottom: 0.1em solid var(--#{$variation})
    &:hover
      border-bottom: 0.1em solid var(--#{$variation}-hover)
  
  .border-bottom-#{$variation}-hover > li
    border-bottom: 0.1em solid transparent
    &:hover
      border-bottom: 0.1em solid var(--#{$variation}-hover)



.mobile-only
  display: none

.desktop-only
  display: block

@media (max-width: 42.0rem)
  .mobile-only
    display: block

  .desktop-only
    display: none