.ip3-edit .card-signposts-expandable .card-signposts-expandable .component-content {
display:flex;
}

.card-signposts-expandable__list {
  display: flex;
  align-items: stretch
}
.card-signposts-expandable__item , .card-signposts-expandable__item.swiper-slide {
  position: relative;
  height: 51.9rem;
  width: 22.4rem;
  color: #fff;
  padding: 2.4rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: width .5s ease-in-out;
  z-index: 1;
  background: linear-gradient(198deg,rgba(23,38,74,0) 18.23%,var(--primary-1) 93.99%);
  background-size: cover;
  /* Ensures the gradient stays consistent */
  background-position: center;
  /* Centers the gradient */
  
  cursor: pointer;
}

.card-signposts-expandable__item-more-icon{
top: 2.4rem; 
  left: 2.4rem;
}
 
.card-signposts-expandable__item-more-text{
top: 4.4rem;
  left: 3.0rem;
}

.card-signposts-expandable__item-more-text:not(:first-child) {
}

.card-signposts-expandable__item.card-signposts-expandable__item--active::before{
-webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

}

.card-signposts-expandable__item.custom-icon-variation .card-signposts-expandable__item-more-text {
  top: 4.4rem;
  left: 2.2rem;
}


.card-signposts-expandable__item--active.custom-icon-variation .card-signposts-expandable__item-more-text {
  top: 7.4rem;
  left: 2.2rem;
}

.card-signposts-expandable__item::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -2;
  border-radius: var(--radius-sm);
  background: linear-gradient(198deg,rgba(23,38,74,0) 18.23%,var(--primary-1) 93.99%);
  background-size: cover;
  /* Ensures the gradient stays consistent */
  background-position: center;
  /* Centers the gradient */
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item:hover::before {
  background: linear-gradient(198deg, rgba(23, 38, 74, 0.00) 18.23%, var(--primary-1) 67.47%);
} 
.card-signposts-expandable__item--active , .card-signposts-expandable__item--active.swiper-slide {
  width: 48rem;
  border-radius: var(--radius-sm);
  background: rgba(23, 38, 74, 0.80);
  backdrop-filter: blur(12px);
  background-size: cover;
  /* Ensures the gradient stays consistent */
  background-position: center;
  /* Centers the gradient */
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.card-signposts-expandable__item--active::before {
  background: rgba(23, 38, 74, 0.80);
}
.card-signposts-expandable__item--active .card-signposts-expandable__thumbnail-title {
  display: none;

  transition: .3s ease-in-out;
  z-index: 1
}

.card-signposts-expandable__thumbnail-title-wrapper{
transition: .3s all ease-in-out;
  min-width:48rem;
    display:block;
}
.card-signposts-expandable__item--active .card-signposts-expandable__thumbnail-title-wrapper {
  display: none;
  transition: .3s ease-in-out;
  z-index: 1
}

.card-signposts-expandable__item--active .card-signposts-expandable__items-wrapper {
  z-index: 1;
    display:block;


}
.card-signposts-expandable__item--active .card-signposts-expandable__item-number {
  font-size: var(--display-m-font-size);
  line-height: var(--display-l-line-height);
  font-weight: var(--display-m-weight);
  z-index: 1;
  opacity: 1;
  
    background-position: center;
}
.card-signposts-expandable__item--active .card-signposts-expandable__text {
  opacity: 1;
  transform: translateY(0);
  z-index: 1
}
.card-signposts-expandable__items-wrapper {
  transition: .7s all ease-in-out;
    display: none;    min-width:42rem;


}
.card-signposts-expandable__thumbnail-title {
  display: block;
  transition: .5s all ease-in-out;
  position: absolute;
  bottom: 0.5rem;
  left: 1.4rem;
  writing-mode: sideways-lr;
  text-orientation: mixed;
}
.card-signposts-expandable__item-number {
  top: 2.4rem;
  left: 2.4rem
}
.card-signposts-expandable__title {
  position: relative
}
.card-signposts-expandable__title::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  height: 4px;
  width: 14rem;
  display: flex;
  background-color: var(--secondary-2)
}
.card-signposts-expandable .swiper-button-prev {
  right: 7.8rem
}
.card-signposts-expandable .swiper-button-next {
  background: var(--primary-1);
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 100%;
  left: unset
}
.card-signposts-expandable .swiper-button-next::after {
  font-size: 2.4rem
}
.card-signposts-expandable .swiper-button-prev {
  background: var(--primary-1);
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 100%;
  left: unset
}
.card-signposts-expandable .swiper-button-prev::after {
  font-size: 2.4rem
}
.card-signposts-expandable .swiper-slide {
  display: flex;
  margin-right: 32px;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
.card-signposts-expandable .swiper-slide:last-child {
  margin-right: 0
}
.card-signposts-expandable .swiper-container {
  scrollbar-width: none;
  -ms-overflow-style: none
}
.card-signposts-expandable .swiper-container::-webkit-scrollbar {
  display: none
}

/* Default styles for all devices */


/* Styles for mobile devices (max-width: 768px) */
@media screen and (max-width: 768px) {

.card-signposts-expandable .swiper-slide {
margin-right:0;
} 
.card-signposts-expandable__list.swiper-wrapper {
  display:block;
  padding:0;
}

.card-signposts-expandable__list .card-signposts-expandable__item {
  width:auto;
  height: 16.4rem;
    margin-bottom:var(--sm-2);
    margin-right:0px;
    border-radius: 8px;
    padding: 3rem 2.6rem;

}
.card-signposts-expandable__list .card-signposts-expandable__item .card-signposts-expandable__thumbnail-title {
writing-mode: horizontal-tb;
position:relative;
bottom:0;
left:0;
margin-bottom: 0;

}

.card-signposts-expandable__list .card-signposts-expandable__item--active {
  width: auto;
  height: 34rem;
    margin-bottom:var(--sm-2);
    margin-right:0px;

}



.card-signposts-expandable__item--active .card-signposts-expandable__title,.card-signposts-expandable__item--active .card-signposts-expandable__title::before, .card-signposts-expandable__item--active .card-signposts-expandable__text {
margin-bottom:var(--xs-1);
}

 .card-signposts-expandable__item--active .card-signposts-expandable__text {
 max-width:28rem;
 }
 
.card-signposts-expandable__item--active .card-signposts-expandable__title::before {
width: 7rem;
height: 0.2rem;
} 

.card-signposts-expandable__item--active .card-signposts-expandable__items-wrapper {
  min-width:auto;
  }
}


/* All Colors background gradients baby */


.card-signposts-expandable__item.primary-1 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-1) 94.11%);
}
.card-signposts-expandable__item.primary-1::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-1) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-1:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-1) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-1 {
  background: #17264acc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-1::before {
  background: #17264acc;
}


.card-signposts-expandable__item.primary-2 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-2) 94.11%);
}
.card-signposts-expandable__item.primary-2::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-2) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-2:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-2) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-2 {
  background: #0071b4cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-2::before {
  background: #0071b4cc;
}


.card-signposts-expandable__item.primary-3 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-3) 94.11%);
}
.card-signposts-expandable__item.primary-3::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-3) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-3:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-3) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-3 {
  background: #5bc6e9cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-3::before {
  background: #5bc6e9cc;
}

.card-signposts-expandable__item.primary-4 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-4) 94.11%);
}
.card-signposts-expandable__item.primary-4::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-4) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-4:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-4) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-4 {
  background: #66c1b3cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-4::before {
  background: #66c1b3cc;
}


.card-signposts-expandable__item.primary-5 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-5) 94.11%);
}
.card-signposts-expandable__item.primary-5::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-5) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-5:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-5) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-5 {
  background: #004547cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-5::before {
  background: #004547cc;
}


.card-signposts-expandable__item.primary-6 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-6) 94.11%);
}
.card-signposts-expandable__item.primary-6::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-6) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-6:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-6) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-6 {
  background: #8db7b0cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-6::before {
  background: #8db7b0cc;
}

.card-signposts-expandable__item.primary-7 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-7) 94.11%);
}
.card-signposts-expandable__item.primary-7::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-7) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-7:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-7) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-7 {
  background: #d8faf5cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-7::before {
  background: #d8faf5cc;
}


.card-signposts-expandable__item.primary-8 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-8) 94.11%);
}
.card-signposts-expandable__item.primary-8::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-8) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-8:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-8) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-8 {
  background: #042b2ccc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-8::before {
  background: #042b2ccc;
}


.card-signposts-expandable__item.primary-9 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-9) 94.11%);
}
.card-signposts-expandable__item.primary-9::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--primary-9) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.primary-9:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--primary-9) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.primary-9 {
  background: #4c9489cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.primary-9::before {
  background: #4c9489cc;
}


/* SECONDARY COLORS */

.card-signposts-expandable__item.secondary-1 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--secondary-1) 94.11%);
}
.card-signposts-expandable__item.secondary-1::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--secondary-1) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.secondary-1:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--secondary-1) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.secondary-1 {
  background: #641d2bcc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.secondary-1::before {
  background: #641d2bcc;
}


.card-signposts-expandable__item.secondary-2 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--secondary-2) 94.11%);
}
.card-signposts-expandable__item.secondary-2::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--secondary-2) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.secondary-2:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--secondary-2) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.secondary-2 {
  background: #f5927ccc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.secondary-2::before {
  background: #f5927ccc;
}


.card-signposts-expandable__item.secondary-3 {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--secondary-3) 94.11%);
}
.card-signposts-expandable__item.secondary-3::before {
  background: linear-gradient(197deg, rgba(23,38,74,0) 18.56%, var(--secondary-3) 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.secondary-3:hover::before {
  background: linear-gradient(198deg, rgba(23,38,74,0) 18.23%, var(--secondary-3) 67.47%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.secondary-3 {
  background: #c7d992cc;
  backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.secondary-3::before {
  background: #c7d992cc;
}
.card-signposts-expandable__items .cta.cta--text-link .icon::before  {
color:var(--base-5);
}




.card-signposts-expandable__item.yellow-1 {
background: linear-gradient(198deg, rgba(23, 38, 74, 0.40) 19.59%, #435219 95.35%)}
.card-signposts-expandable__item.yellow-1::before {
background: linear-gradient(198deg, rgba(23, 38, 74, 0.40) 19.59%, #435219 95.35%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.yellow-1:hover::before {
background: linear-gradient(198deg, rgba(49, 64, 45, 0.40) 19.59%, #435219 68.83%);
transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.yellow-1 {
background: rgba(67, 82, 25, 0.80);
backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.yellow-1::before {
background: rgba(67, 82, 25, 0.80);
}


.card-signposts-expandable__item.dark-blue-1 {
border-radius: 8px;
background: linear-gradient(197deg, rgba(23, 38, 74, 0.00) 18.56%, #042B2C 94.11%);

}
.card-signposts-expandable__item.dark-blue-1::before {
background: linear-gradient(197deg, rgba(23, 38, 74, 0.00) 18.56%, #042B2C 94.11%);
  transition: .5s ease-in-out;
}
.card-signposts-expandable__item.dark-blue-1:hover::before {
background: linear-gradient(198deg, rgba(23, 38, 74, 0.00) 18.23%, #042B2C 67.47%);
transition: .5s ease-in-out;
}
.card-signposts-expandable__item--active.dark-blue-1 {
background: rgba(4, 43, 44, 0.80);
backdrop-filter: blur(12px);
}
.card-signposts-expandable__item.card-signposts-expandable__item--active.dark-blue-1::before {
background: rgba(4, 43, 44, 0.80);
}


/* color for line above title */

.card-signposts-expandable__title.line-primary-1::before {
  background-color: var(--primary-1);
}
.card-signposts-expandable__title.line-primary-2::before {
  background-color: var(--primary-2);
}
.card-signposts-expandable__title.line-primary-3::before {
  background-color: var(--primary-3);
}
.card-signposts-expandable__title.line-primary-4::before {
  background-color: var(--primary-4);
}
.card-signposts-expandable__title.line-primary-5::before {
  background-color: var(--primary-5);
}
.card-signposts-expandable__title.line-primary-6::before {
  background-color: var(--primary-6);
}
.card-signposts-expandable__title.line-primary-7::before {
  background-color: var(--primary-7);
}
.card-signposts-expandable__title.line-primary-8::before {
  background-color: var(--primary-8);
}
.card-signposts-expandable__title.line-primary-9::before {
  background-color: var(--primary-9);
}

.card-signposts-expandable__title.line-secondary-1::before {
  background-color: var(--secondary-1);
}
.card-signposts-expandable__title.line-secondary-2::before {
  background-color: var(--secondary-2);
}
.card-signposts-expandable__title.line-secondary-3::before {
  background-color: var(--secondary-3);
}