.component-VPB
{
  position: relative;

  &::before
  {
    @include linear-gradient(to right, rgba(0,0,0,0) 0, #EFEFEF 25%, #EFEFEF 75%, rgba(0,0,0,0) 100%);

    content: '';
    display: block;
    height: 160px;
    width: 100%;

    position: absolute;
      left: 0;
      top: 50%;
      z-index: -1;
    transform: translateY(-50%);
  }
}
.component-VPB-container
{
  @include outer-container;
}
.component-VPB-content
{
  display: flex;
    align-items: center;
    justify-content: center;
}
.component-VPB-content-picture
{
  display: block;
  margin-right: 30px;
}
.component-VPB-content-text
{
  line-height: 1.2;
}
.component-VPB-content-text-title
{
  color: black;
  font-family: lucien-book, sans-serif;
  font-size: 1.5rem;
}
.component-VPB-content-text-link
{
  display: block;

  color: $color-golden;
  font-family: lucien-bold, sans-serif;
  font-size: 1.5rem;
  text-decoration: underline;
}

@include tablet-landscape-and-below
{
  font-size: 1rem;
}

@include mobile-landscape-and-below
{
  .component-VPB
  {
    background: #EFEFEF;
    padding: 30px 30px 60px;

    &::before
    {
      display: none;
    }
  }
  .component-VPB-content
  {
    display: block;
  }
  .component-VPB-content-text-title
  {
    font-size: 0.9rem;
    text-align: center;
  }
  .component-VPB-content-text-link
  {
    border: 1px solid $color-golden;
    margin-top: 15px;
    padding: 1em;

    font-size: 0.9rem;
    text-align: center;
  }
  .component-VPB-content-picture
  {
    width: 33%;

    position: absolute;
      bottom: -30px;
      left: 50%;
    transform: translateX(-50%);

    img
    {
      display: block;
      width: 100%;
    }
  }
}