/*=========================
	STAFF CARDS BLOCK
=========================*/

.block-staff-cards .staff-cards__headerWrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.block-staff-cards .title {
  text-align: left;
  margin-bottom: var(--space-5);
}

.block-staff-cards .swiper-slide {
  color: var(--color-t);
  background: var(--color-t-60);
  /* padding: var(--space-3); */
  border-radius: 20px;
   width: 465px;
   height: auto;
}

.block-staff-cards .staff-cards__contentbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/** Carousel Layout - Content **/
.block-staff-cards .swiper-slide .image img {
    height: 320px;
    object-fit: cover;
    object-position: top;
}
.block-staff-cards .swiper-slide .content {
    background: var(--color-n-white);
    padding: var(--space-4);
    color: var(--color-p);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/** Grid Layout - Content **/
.block-staff-cards .staff-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.block-staff-cards .staff-card {
    display: flex;
    background: var(--color-n-white);
    padding: var(--space-4);
    outline: 1px solid var(--color-n-grey); 
    box-sizing: border-box; 
    column-gap: var(--space-4);
    position: relative;
    color: var(--color-p);
}
.block-staff-cards .block-link{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
}
.block-staff-cards .staff-card:hover {
    background: var(--color-p);
    color: var(--color-n-white);
}
.block-staff-cards .staff-card:hover svg *{
    stroke: var(--color-n-white);
}
.block-staff-cards .staff-card__content {
    width: 100%;
}
.block-staff-cards .staff-card img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: top;
    column-gap: var(--space-4);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: smooth;
    transform: translateZ(0);
    backface-visibility: hidden;
}


.block-staff-cards span.right-arrow {
    position: absolute;
    bottom: 17px;
    right: 17px;
}


/* Swiper Pagination */
.block-staff-cards .swiper-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    column-gap: 12px;
}
.block-staff-cards .swiper-buttons div{
    opacity: 1;
    transition: 0.3s ease;
}
.block-staff-cards .swiper-buttons div:hover{
    opacity: 0.8;
}

/* Swiper Navigation */
.block-staff-cards .swiper-button-prev,
.block-staff-cards .swiper-button-next {
    border-radius: 10px;
    width: 45px;
    height: 32px;

    position: relative !important;
    inset: 0;
    color: var(--color-n-white);
}
.block-staff-cards .swiper-button-prev svg path,
.block-staff-cards .swiper-button-next svg path {
  stroke: var(--color-p);
}
.block-staff-cards.bg-color-n-white .swiper-button-prev svg path,
.block-staff-cards.bg-color-n-white .swiper-button-next svg path {
  stroke: var(--color-p);
}
.block-staff-cards .swiper-button-next:after, 
.block-staff-cards .swiper-button-prev:after{
    font-size: 12px;
    font-weight: 800;    
}


/* Responsive */
@media only screen and (max-width: 1200px) {
    .block-staff-cards .staff-cards__grid{
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 768px) {
    .block-staff-cards .image-cards__contentbox {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }
    .block-staff-cards .title {
        margin-bottom: var(--space-4);
    }
    .block-staff-cards .staff-card{
        flex-direction: column;
        row-gap: 15px;
        padding: var(--space-3);
    }
}

@media only screen and (max-width: 576px) {
    .block-staff-cards {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }
    .block-staff-cards .image-cards__header{
        margin-bottom: 20px;
    }
    .block-staff-cards .title {
        margin-bottom: 0;
    }
  .block-staff-cards .swiper-slide .copy {
    font-size: 1.6rem;
  }
  .block-staff-cards .swiper-buttons{
    margin-top: 15px;
    column-gap: 8px;
  }
  .block-staff-cards .swiper-buttons .swiper-button-prev,
  .block-staff-cards .swiper-buttons .swiper-button-next {
    width: 28px;
    height: 28px;
  }
  .block-staff-cards .staff-cards__headerWrapper {
    margin-bottom: var(--space-4);
    }
}