.main {
  width: 100%;
}

/* Search and Filter */

.main .search-container {
  max-width: 650px;
  margin: var(--section-gap) auto auto auto;
  padding: 0px var(--section-padding);
}

.main .search-container__search-box {
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.25);
}

.search-container label, legend {
  color: #000;
}

.main__filter {
  max-width: var(--section-max-width);
  margin: 36px auto auto auto;
  padding: 0px var(--section-padding);
}

.btn-trigger-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  font-weight: 600;
  color: #000;
}

.btn-trigger-filter span {
  display: block;
  width: 32px;
  pointer-events: none;
}

.filter__separator {
  display: block;
  width: 100%;
  height: 2px;
  margin: 16px 0 0 0;
  background-color: var(--gray200);
}

.filter__wrapper-options {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: #0000004d;
  display: none;
}

.submit-button{
  background-color: var(--red500);
  margin: 20px 0 0 auto;
}

.filter__wrapper-options-submit {
  display: flex;
  justify-content: end;
}

.filter--active-collapsable {
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter__wrapper-options-content {
  width: 60vw;
  height: 80vh;
  padding: 10vh 10vh 3vh 10vh;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}

.filter__wrapper-options-grid {
  display: grid;
  grid-template-columns: 45% 45%;
  gap: 10%;
  overflow-y: scroll;
  height: 85%;
}

.wrapper-options__wrapper-list {
  display: flex;
  flex-direction: column;
  width: 91%;
}

.close-modal {
  position: absolute;
  right: 5vh;
  top: 5vh;
  width: 1.5rem;
  cursor: pointer;
}

.wrapper-options__wrapper-list h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  font-weight: 400;
  color: #000;
}

.wrapper-options__wrapper-list__list-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.button-filter {
  padding: 4px 16px;
  border: 1px solid #000; 
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  font-weight: 400;
  color: #000;
}

.button-filter:hover {
  background-color: #000;
  color: #fff;
}

.button-filter.button--selected {
  background-color: #000;
  color: #fff;
}

/* Person cards */

.main__person-cards {
  max-width: var(--section-max-width);
  width: 100%;
  margin: 5rem auto var(--section-gap) auto;
  padding: 0 var(--section-padding);
}

.main__person-cards > h1, .main__person-cards > h2 {
  display: block;
  position: relative;
  margin: 0px 0px 0px 40px;
  padding-bottom: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.8rem, 5vw, 2rem);
  font-weight: 500;
  color: #000;
}

.main__person-cards > h1::before, .main__person-cards > h2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -16px;
  width: 35vw;
  max-width: 450px;
  height: 2px;
  background-color: var(--gray200);
}

.person-cards__list-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin: 24px 0 0 0 !important;
}

.person-cards__list-cards__card {
  flex: 1 1 220px;
  max-width: 260px;
  height: 65vw;
  max-height: 420px;
  min-height: 320px;
  margin: 0 0 24px 0;
  transition: max-height .3s;
}

/* Person Cards - Default card */

.person-cards__list-cards__card.card--default {
  border: 4px solid #fff;
  border-radius: 2px;
}

.person-cards__list-cards__card.card--default.card--hidden {
  /* display: none; */
  max-height: 0px !important;
  min-height: 0px !important;
  visibility: hidden;
  overflow: hidden;
}

.person-cards__list-cards__card.card--default:hover .card-anchor__wrapper-text__description {
  max-height: 125px !important;
}

.person-cards__list-cards__card.card--default:hover {
  max-height: 455px;
}

/* Person Cards - Fire card */

.person-cards__list-cards__card.card--fire {
  position: relative;
  background: linear-gradient(white, white) padding-box,
  linear-gradient(to bottom, var(--red800), var(--red500)) border-box;
  border-radius: 5px;
  border: 4px solid transparent;
  transition: max-height .3s;
}

.person-cards__list-cards__card.card--fire:hover {
  max-height: 453px;
  border-radius: 5px 5px 0 0; 
}

.person-cards__list-cards__card.card--fire:hover .card-anchor__wrapper-text__call-tag {
  height: 33px;
  padding: 4px 0;
}

.person-cards__list-cards__card.card--fire .wrapper-text__description__call-tag {
  display: none;
}

.person-cards__list-cards__card.card--fire .card__highlight-title.card--fire {
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin: 0 auto;
  padding: 6px 16px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.6rem);
  font-weight: 500;
  color: #fff;
  background-color: var(--red800);
  z-index: 1;
}

.person-cards__list-cards__card.card--fire .card__highlight-title.card--fire img {
  max-width: 18px
}

/* Person Cards - Highlight card */

.person-cards__list-cards__card.card--highlight {
  position: relative;
  background: linear-gradient(white, white) padding-box,
  linear-gradient(to bottom, var(--red800), var(--red500)) border-box;
  border-radius: 5px;
  border: 4px solid transparent;
  transition: max-height .3s;
}

.person-cards__list-cards__card.card--highlight:hover {
  max-height: 453px;
  border-radius: 5px 5px 0 0; 
}

.person-cards__list-cards__card.card--highlight:hover .card-anchor__wrapper-text__call-tag {
  height: 33px;
  padding: 2px 0;
}

.person-cards__list-cards__card.card--highlight .wrapper-text__description__call-tag {
  display: none;
}

.person-cards__list-cards__card.card--highlight .card__highlight-title.card--highlight {
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  display: block;
  width: max-content;
  margin: 0 auto;
  padding: 6px 16px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.6rem);
  font-weight: 500;
  color: #fff;
  background-color: var(--red800);
}

.card__highlight-title {
  display: none;  
}

.card__card-anchor {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.card__card-anchor .card-main-image{
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
}

.card-anchor__wrapper-image {
	display: block;
	max-width: 90px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: -28px;
	z-index: 1;
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.25);
}

.card-anchor__wrapper-text {
  width: 100%;
  background-color: var(--gray200);
  position: relative;
}

.card-anchor__wrapper-text__title {
  margin: 30px 0 6px 0;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.6rem);
  font-weight: 500;
  color: #000;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.card-anchor__wrapper-text__description {
  position: relative;
  max-height: 0px;
  overflow: hidden;
  transition: max-height .3s;
}

.wrapper-text__description__list-description {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 0px 0 6px 0;
}

.wrapper-text__description__list-description li p {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.2rem, 5vw, 1.3rem);
  font-weight: 300;
  color: #000;  
}

.wrapper-text__description__list-description li:nth-child(2) {
  margin-right: -10px;
}

.wrapper-text__description__list-description li p b {
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: 900;
}

.wrapper-text__description__call-tag,
.card-anchor__wrapper-text__call-tag h3 {
  padding: 6px 0;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: 700;
  color: #fff;  
  background-color: var(--red500);
}

.card-anchor__wrapper-text__call-tag {
  height: 0px;
  padding: 0;
  overflow: hidden;
  transition: all .3s;
}

.card-anchor__wrapper-text__call-tag h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.card-anchor__wrapper-text__call-tag h3 span {
  display: flex;
  align-items: center;
  max-width: 18px;
  margin-top: 2px;
}

.card-anchor__wrapper-text__call-tag h3 span svg {
  width: 100%;
  height: 100%;
}

/* Person Cards - Pagination */

.person-cards__pagination {
  width: 100%;
}

.pagination__list {
  display: flex;
  width: max-content;
  margin: 0 auto;
}

.pagination__list li a {
  padding: 6px 10px;
  font-weight: 500;
}

.pagination__list .link--active-link {
  color: var(--red500);
}

/* Description */

.main__description {
  max-width: var(--section-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--section-padding);
}

.main__description h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.2rem, 5vw, 2rem);
  font-weight: 600;
  color: #000;
}

.main__description h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.8rem, 5vw, 1.6rem);
  font-weight: 600;
  color: #000;
  margin-top: 10px;
}

.main__description h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.6rem, 5vw, 1.4rem);
  font-weight: 600;
  color: #000;
  margin-top: 10px;
}

.main__description p, .main__description li {
  margin: 24px auto;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.6rem);
  font-weight: 400;
  color: #000;
  list-style: inside;
}

.main__description li{
  margin-left: 20px;
}

@media (max-width: 900px) {
  .person-cards__list-cards__card {
    max-height: 360px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 48px;
  }

  .person-cards__list-cards__card {
    margin: 0px;
  }
}

@media (max-width: 460px) {

  /* Search */

  .search-container__search-box {
    flex-direction: column;
  }

  .search-box__btn-search {
    justify-content: center;
    width: 100%;
    padding: 8px 12px 8px 0px;
    margin-top: 10px;
    color: #fff;
    background-color: var(--red500);
  }

  .search-box__btn-search::before {
    content: initial;
  }

  /* Filter  */

  .main__filter {
    margin: calc(36px + 44px) auto auto auto;
  }

  /* Person Cards */

  .main__person-cards > h1::before, .main__person-cards > h2::before {
    left: 0px;
  }

  .main__person-cards > h1, .main__person-cards > h2 {
    margin: 0px 0px 0px 0px;
  }

  .person-cards__list-cards__card {
    max-width: 360px;
    /* height: 90vw; */
    height: 460px;
  }

  .person-cards__list-cards__card.card--default:hover .card-anchor__wrapper-text__description {
    max-height: 102px !important;
  }
  
  .person-cards__list-cards__card.card--default:hover {
    max-height: 360px;
  }

  .person-cards__list-cards__card.card--fire:hover {
    max-height: 360px;
    border-radius: 5px;
  }

  .person-cards__list-cards__card.card--fire:hover .card-anchor__wrapper-text__call-tag {
    height: 0px;
    padding: 0px !important;
  }

  .person-cards__list-cards__card.card--highlight:hover {
    max-height: 360px;
    border-radius: 5px; 
  }
  
  .person-cards__list-cards__card.card--highlight:hover .card-anchor__wrapper-text__call-tag {
    height: 0px;
    padding: 0px;
  }
}

.splide__list{
  flex-wrap: inherit;
}

.splide__slide{
  flex: 1 0 230px;
}

.splide__arrows{
  display: none;
}

/* NoUi Class */

.slider-list{
  width: 95%;
  margin-left: 5%;
}

.noUi-target{
  height: 10px;
  border: 0;
}

.noUi-base{
  background-color: #000;
  border-radius: 20px;
}

.noUi-connect{
  background-color: var(--red500);
}

.noUi-handle{
  border-radius: 50%;
  height: 22px !important;
  width: 22px !important;
  background-color: red;
  box-shadow: none;
  border: 0;
}

.noUi-handle:after, .noUi-handle:before{
  display: none;
}

.slider-label{
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.slider-label div{
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.6rem, 5vw, 1.6rem);
  font-weight: 400;
  color: #000;
}

.slider-label span{
  font-weight: 800;
}

.main__person-cards.no-results h1::before{
  display: none;
}

@media screen and (max-width: 768px) {

  .filter__wrapper-options-content {
    width: 100vw;
    height: 100vh;
  }

  .filter__wrapper-options-grid{
    grid-template-columns: 100%;
    height: 90%;
  }

  .wrapper-options__wrapper-list{
    max-width: 90%;
  }

  .wrapper-options__wrapper-list h3, .slider-label div, .button-filter{
    font-size: clamp(1.4rem, 5vw, 1rem);
  }

  .noUi-target{
    height: 5px;
  }

  .noUi-handle{
    width: 17px !important;
    height: 17px !important;
  }
}

@media screen and (min-width: 1300px){

  .filter__wrapper-options-grid .wrapper-options__wrapper-list:last-child{
    grid-column: span 2;
    justify-self: start;
  }
}

.verified{
  height: 20px;
}

.verified-text{
  text-transform: uppercase;
  background-color: #4E98FC;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.2rem, 5vw, 1.2rem);
  font-weight: 800;
  color: #fff;
  width: 100%;
  text-align: center;
  display: block;
  padding: 2px;
  margin-bottom: 5px;
}