section.homepage-signpost-slider {
  position: relative;
  &:after {
    content: '';
    z-index: 1;
    background-image: url('../img/crest-transparent.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    top: -15vh;
    left: 5vw;
    width: 35vw;
    position: absolute;
  }
  .title-wrapper {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: 0 auto;
    max-width: 1100px;
    h1 {
      color: black;
      font-size: clamp(45px, 5.5vw, 82px);
      font-family: $heading-font;
      margin-top: -15px;
    }
  }
  .signpost-slider {
    position: relative;
    z-index: 10;
    height: 600px;
    @media(max-width: 992px) {
      height: 550px;
    }
    @include cover-background;

    display: flex;
    @media(min-width: 992px) {
      padding: 0 5%;
      justify-content: center;
    }
    @media(max-width: 992px) {
      width: 1200px !important;
      overflow: visible;
    }
    transition: all 1s ease-in;
    .bg-image {
      width: 100%;
      height: 600px;
      @media(max-width: 992px) {
        height: 550px;
      }
      transition: background 0.5s ease-in-out;
      position: absolute;
      @include cover-background;
      &.color {
        @media(min-width: 992px) {
          &.slide-0 {
            clip-path: inset(0px 72.5% 0px 5%);
          }
          &.slide-1 {
            clip-path: inset(0px 50% 0px 27.5%);
          }
          &.slide-2 {
            clip-path: inset(0px 27.5% 0px 50%);
          }
          &.slide-3 {
            clip-path: inset(0px 5% 0px 72.5%);
          }
        }
        @media(max-width: 991.9px) {
          &.slide-0 {
            clip-path: inset(0px 900px 0px 0px);
          }
          &.slide-1 {
            clip-path: inset(0px 600px 0px 300px);
          }
          &.slide-2 {
            clip-path: inset(0px 300px 0px 600px);
          }
          &.slide-3 {
            clip-path: inset(0px 0px 0px 900px);
          }
        }
      }
      &.grayscale {
          filter: grayscale(1);
          background-color: var(--gray);
      }
    }
    .sp-slide {
      @media(min-width: 992px) {
        width: 25%;
  
      }
      @media(max-width: 991.9px) {
        width: 300px;
      }
      display: block;
      position: relative;
      padding: 0 20px;
      cursor: pointer;
      transition: all 0.5s ease;
      border-top: 5px solid rgba(0,0,0,0);
      border-left: 5px solid rgba(0,0,0,0);
      border-right: 5px solid rgba(0,0,0,0);
      z-index: 5;
      &.active {
        transition: all 0.5s ease;
        border-top: 5px solid color(yellow, dark);
        border-left: 5px solid color(yellow, dark);
        border-right: 5px solid color(yellow, dark);
        .content {
          transition: all 0.5s ease;
          opacity: 1;
          visibility: visible;
        }
      }
      .title {
        position: absolute;
        bottom: 220px;
        color: white;
        font-size: 25px;
        font-family: 'Poppins', sans-serif;
        z-index: 20;
        text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
      }
      .content {
        background: color(yellow, dark);
        position: absolute;
        width: calc(100% + 10px);
        left: -5px;
  
        border: 3px solid color(yellow, dark);
        color: white;
        padding: 10px 20px;
        transition: all 0.5s ease;
        opacity: 0;
        visibility: hidden;
        font-size: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        a {
          display: block;
          margin-top: 10px;
        }
      }
    }
  }
}

.signpost-slider {
    margin-bottom: 0px!important;
}    

section.homepage-signpost-slider .signpost-slider .sp-slide .content {
    background: #f5cf5d;
    position: absolute;
    width: calc(100% + 10px);
    left: -5px;
    bottom: 0px;

    border: 3px solid #f5cf5d;
    color: #333333;
    padding: 10px 20px;
    transition: all .5s ease;
    opacity: 0;
    visibility: hidden;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.homepage-signpost-slider .signpost-slider .sp-slide.active {
    transition: all .5s ease;
    border-top: 5px solid #f5cf5d;
    border-left: 5px solid #f5cf5d;
    border-right: 5px solid #f5cf5d;
}

section.homepage-signpost-slider .signpost-slider .bg-image {
    width: 100%;
    height: 600px;
    transition: background .5s ease-in-out;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}