$slider-shadow-color: rgba(0, 0, 0, .25)

.slider
  width: 100%
  flex-grow: 1
  position: relative

  // Inner layout
  display: flex
  justify-content: space-around
  align-items: center

  // Content

  .card
    // Positioning
    width: 60vw
    height: 60vh
    position: relative;
    // Appearance
    background-color: $white
    color: $dark-text-primary
    border-radius: 10px
    box-shadow: 15px 15px 20px 0 $slider-shadow-color

    h5
      margin: 0
      position: absolute
      top: 50%
      transform: translateY(-50%)
      width: 100%


  // Arrows

  .icon
    cursor: pointer
    user-select: none

    display: block
    font-size: 30px
    text-align: center
    transition: transform .1s, 'text-shadow' .1s
    width: 40px

    &.ion-chevron-left
      left: 5%

    &.ion-chevron-right
      right: 5%

    &:hover
      transform: scale(1.2, 1.2)
      text-shadow: 2px 2px 5px $slider-shadow-color

$slider-shadow-color: rgba(0, 0, 0, .25)

.slider
  width: 100%
  flex-grow: 1
  position: relative

  // Inner layout
  display: flex
  justify-content: space-around
  align-items: center

  // Content

  .card
    // Positioning
    width: 60vw
    height: 60vh
    position: relative
    // Appearance
    background-color: $white
    color: $dark-text-primary
    border-radius: 10px
    box-shadow: 15px 15px 20px 0 $slider-shadow-color

    h5
      margin: 0
      position: absolute
      top: 50%
      transform: translateY(-50%)
      width: 100%


  // Arrows

  .icon
    cursor: pointer
    user-select: none

    display: block
    font-size: 30px
    text-align: center
    transition: transform .1s, 'text-shadow' .1s
    width: 40px

    &.ion-chevron-left
      left: 5%

    &.ion-chevron-right
      right: 5%

    &:hover
      transform: scale(1.2, 1.2)
      text-shadow: 2px 2px 5px $slider-shadow-color

Remove stray semicolon from sass
Remove stray semicolon from sass
