{# Container #}

.tab-cards__title {
  font-size: clamp(1.75rem,3vw,2.5rem);
  line-height: clamp(2.25rem,3vw,3rem);
}

.tab-cards {
  padding:3.125rem 0;
  text-align:center;
}


{# Tabs #}

.tab-cards__tabs-wrap {
  padding:2.5rem 0 0;
  overflow-x:auto;
  overflow-y:hidden;
}

.tab-cards__tabs {
  list-style:none;
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  margin:0;
  padding:0;
  max-width:100%;
  min-width:800px;
}

@media(min-width:73.75rem) {
  .tab-cards__tabs {
    min-width:0;
    justify-content:center;
  }
}

.tab-cards__tab-link {
  display:block;
  position:relative;
  padding:0.5rem 1.5rem;
  border-bottom:1px solid #ccc;
  font-size:1.125rem;
  text-decoration:none;
  transition:border .3s;
}

.tab-cards__tab-link:after {
  content:'';
  display:block;
  position:absolute;
  bottom:-3px;
  left:0;
  width:100%;
  height:3px;
  opacity:0;
  background-color:#ccc;
  transition:opacity .3s;
}

.tab-cards__tab-link--active {
  font-weight:bold;  
}

.tab-cards__tab-link--active:after {
  opacity:1;
}


{# Tabs Panes #}

.tab-cards__panes {
  padding-top:2.5rem;  
}

.tab-cards__pane, 
.tab-cards__pane.swiper {
  display:none;  
}

.tab-cards__pane.tab-cards__pane--active {
  display:block;  
}

.tab-cards__list {
  list-style:none;
  margin:0;
  padding:0;
}

.tab-cards__item {
  min-height:375px;
  width:100%;
  border-radius:1rem;
  overflow:hidden;
  text-align:left;
  position:relative;
}


{# 2 Cards #}

@media(min-width:73.75rem) {
  .tab-cards__list--2.swiper-wrapper {  
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .tab-cards__list--2 .tab-cards__item {
    min-height:700px;
  }
  
  .tab-cards__list--2 .tab-cards__item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .tab-cards__list--2 .tab-cards__item:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
}


{# 3 Cards #}

@media(min-width:73.75rem){
  .tab-cards__list--3.swiper-wrapper {  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .tab-cards__list--3 .tab-cards__item {
    min-height:700px;
  }
  
  .tab-cards__list--3.tab-cards__pane--three-across-short .tab-cards__item {
    min-height:340px;
  }
  .tab-cards__list--3 .tab-cards__item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .tab-cards__list--3 .tab-cards__item:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .tab-cards__list--3 .tab-cards__item:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
}

  
{# 4 Cards #}

@media(min-width:73.75rem){
  .tab-cards__list--4.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .tab-cards__list--4 .tab-cards__item {
    min-height:340px;  
  }

  .tab-cards__list--4 .tab-cards__item:nth-child(1) { 
    grid-area: 1 / 1 / 3 / 2; 
    height:100%;
  }

  .tab-cards__list--4 .tab-cards__item:nth-child(2) {
    grid-area: 1 / 2 / 3 / 3; 
    height:100%;
  }

  .tab-cards__list--4 .tab-cards__item:nth-child(3) { 
    grid-area: 1 / 3 / 2 / 4; 
  }

  .tab-cards__list--4 .tab-cards__item:nth-child(4) { 
    grid-area: 2 / 3 / 3 / 4; 
  }
  
  .tab-cards__list--4 .tab-cards__card-content {
    min-height:185px;
  }
}


{# 4 Cards - Across #}

@media(min-width:73.75rem){
  .tab-cards__list--4.tab-cards__pane--four-across.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__item {
    min-height:700px;
  }

  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__item:nth-child(1) { 
    grid-area: 1 / 1 / 2 / 2;
  }

  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__item:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }

  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__item:nth-child(3) { 
    grid-area: 1 / 3 / 2 / 4;
  }

  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__item:nth-child(4) { 
    grid-area: 1 / 4 / 2 / 5;
  }
  
  .tab-cards__list--4.tab-cards__pane--four-across-short .tab-cards__item {
    min-height:340px;
  }
  
  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__card-content {
    display: flex;
    flex-direction: column;
    min-height:185px;
    width:90%;
  }
  
  .tab-cards__list--4.tab-cards__pane--four-across .tab-cards__button {
    margin-top:auto;  
  }
}





{# 5 Cards #}

@media(min-width:73.75rem){
  .tab-cards__list--5.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .tab-cards__list--5 .tab-cards__item {
    min-height:340px;  
  }

  .tab-cards__list--5 .tab-cards__item:nth-child(1) { 
    grid-area: 1 / 1 / 4 / 2;
    height:calc(100% - 20px);
  }

  .tab-cards__list--5 .tab-cards__item:nth-child(2) { 
    grid-area: 1 / 2 / 2 / 3; 
  }

  .tab-cards__list--5 .tab-cards__item:nth-child(3) { 
    grid-area: 1 / 3 / 2 / 4; 
  }

  .tab-cards__list--5 .tab-card__item:nth-child(4) { 
    grid-area: 2 / 2 / 3 / 3; 
  }

  .tab-cards__list--5 .tab-cards__item:nth-child(5) { 
    grid-area: 2 / 3 / 3 / 4; 
  }
}


{# 6 Cards #}

@media(min-width:73.75rem){
  .tab-cards__list--6.swiper-wrapper {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
  }
}

.tab-cards__list--6 .tab-cards__item {
  min-height:375px;  
  width:100%;  
}

@media(min-width:73.75rem){
  .tab-cards__list--6 .tab-cards__item {
    width:calc(33% - 10px);
    position:relative;
    min-height:340px;
  } 
  
  .tab-cards__list--6 .tab-cards__card-content {
    min-height:185px;
  }
}


{# Card Media #}

.tab-cards__card-image-wrap {
  position: absolute;
  width: 100%;
  height: 100%; 
}

.tab-cards__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:0 0 0 2rem;
}

body:not(.reduced-motion) .tab-cards__item--has-link .tab-cards__card-image {
  transform:scale(1,1);
  transition:transform .3s;
}

.tab-cards__item.tab-cards__item--has-link:hover .tab-cards__card-image,
.tab-cards__item.tab-cards__item--has-link:focus-within .tab-cards__card-image {
  transform:scale(1.1, 1.1);
}


{# Card Content #}

.tab-cards__card-content {
  position:absolute;
  border-radius: 0 1rem 0 0;
  padding: 1.5rem;
  width: 85%;
  background-color: #fff;
  min-height:185px;
  bottom:0;
}

body:not(.reduced-motion) .tab-cards__item--has-link .tab-cards__card-content {
  bottom:-80px;
  transition:bottom .3s;
}

.tab-cards__item.tab-cards__item--has-link:hover .tab-cards__card-content,
.tab-cards__item.tab-cards__item--has-link:focus-within .tab-cards__card-content {
  bottom:0;
}

.tab-cards__card-title {
  font-size:clamp(1.125rem, 2.5vw, 1.5rem);
  line-height:clamp(1.5rem, 2.5vw, 1.75rem);
}


{# Mobile Swiper Controls #}

.tab-cards__controls {
  display:flex;
  align-items:center;
  margin-top:3.125rem;
}

@media(min-width:73.75rem){
  .tab-cards__controls {
    display:none;
  }
}

.tab-cards__paging {
  position:static !important;
  padding:0 1rem;
}

.tab-cards .swiper-pagination-bullet {
  background-color:#000 !important;
  transition:width .3s;
}

.tab-cards .swiper-pagination-bullet-active {
  width:25px  !important;
  border-radius:5px !important;
}

.tab-cards__control {
  position:relative !important;
  margin-top:0 !important;
  border:0;
  color:#000 !important;
  background-color:transparent;
}

.tab-cards__control:after {
  font-size:1rem !important;  
}


{# Section Footer #}

.tab-cards__footer {
  padding-top:3.125rem;
}

@media(max-width:73.75rem) {
  .tab-cards__footer-button {
    width:100%;
  }
}