.vl-spotlight {
  &::before {
    background-color: $vl-black;
  }

  &--blue {
    a {
      color: $vl-secondary-blue;
    }

    &::before {
      background-color: $vl-secondary-blue;
    }
  }
}

.vl-spotlight-bottom {
  display: block;
  text-decoration: none;
  position: relative;
  padding: 0 $vl-spotlight-padding 3rem;

  // border-top
  &::after {
    display: block;
    content: "";
    height: 0.2rem;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    background-color: $vl-text-color;
    z-index: 3;
  }

  &--alt::after {
    background-color: $vl-border-color;
  }

  &--small {
    display: block;
    text-decoration: none;
    position: relative;
    padding: 0.3rem $vl-spotlight-padding;
  
    // border-top
    &::after {
      display: block;
      content: "";
      height: 0.2rem;
      left: 0;
      right: 0;
      position: absolute;
      bottom: 0;
      background-color: $vl-text-color;
      z-index: 3;
    }
  
    &--alt::after {
      background-color: $vl-border-color;
    }
  }
}