.highlights-list .card .card-icon > img {
  transition: filter 0.3s ease; 
}

.highlights-list .card .card-content .url-icon rect {
  transition: fill 0.3s ease; 
}

.highlights-list .card .card-content .url-icon path {
  transition: stroke 0.3s ease;
}

.highlights-list .card a:hover .card-icon >img{
}

.highlights-list .card a:hover .card-content .url-icon rect{
  fill: #000;
}

.highlights-list .card a:hover .card-content .url-icon path{
  stroke: #fff;
}

.highlights-list .hero-content {
  text-align: center;
  padding-bottom: 5.21vw;
  max-width: 49.22vw;
}

.highlights-list .hero-title {
  color: #fff;
  margin-bottom: 0.78vw;
}

.highlights-list .hero-desc {
  color: #FFF;
  opacity: 0.8;
}

.highlights-list .cards {
  width: 100%;
  z-index: 2;
  position: absolute;
  bottom: 0;
  display: flex;
}

.highlights-list .card {
  padding-top: 1.30vw;
  padding-right: 3.39vw;
  padding-bottom: 3.65vw;
  padding-left: 2.40vw;
  border-top: 1px solid #ffffff20;
  border-right: 1px solid #ffffff20;
  height: 20.05vw;
}

.highlights-list .card >a{
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.highlights-list .card-icon {
  color: #fff;
}

.highlights-list .card-title {
  color: #fff;
  max-width: 15.25vw;
}

.highlights-list .card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20%;
  width: 100%;
}

.highlights-list .card-content svg{
  width: 2.60vw;
  height: 2.60vw;
}

.highlights-list .card-btn:hover {
  background: #ffd700;
}

.highlights-list .card-list{
  width: 100%;
  overflow: hidden;
}

.highlights-list .swiper-slide{
  background: none;
}

.highlights-list .card-icon img {
  width: auto;
  height: 4.17vw;
}

@media(max-width: 1024px){
  .highlights-list .hero {
    background-size: cover;
  }

  .highlights-list .hero-title {
    margin-bottom: 1.46vw;
  }

  .highlights-list .card {
    padding-top: 1.95vw;
    padding-right: 1.95vw;
    padding-bottom: 1.66vw;
    padding-left: 1.95vw;
    height: 30.37vw;
  }

  .highlights-list .card-icon img {
    width: auto;
    height: 5.86vw;
  }

  .highlights-list .card-content svg{
    width: 3.22vw;
    height: 3.22vw;
  }

  .highlights-list .card-title {
    max-width: 15.15vw;
  }

  .highlights-list .hero-content {
    padding-bottom: 10.74vw;
    max-width: 83.30vw;
  }
}

@media (max-width: 768px) {
  .highlights-list .card-icon img {
    width: auto;
    height: 13.33vw;
  }

  .highlights-list .hero-title {
    margin-bottom: 4vw;
  }

  
  .highlights-list .hero {
  }

  .highlights-list .hero-content {
    padding-bottom: 55vw;
    max-width: 89.20vw;
  }

  .highlights-list .card-content svg{
    width: 6.67vw;
    height: 6.67vw;
  }
  
  .highlights-list .card {
    padding-top: 5.33vw;
    padding-right: 4.93vw;
    padding-bottom: 4vw;
    padding-left: 4vw;
    height: 59.33vw;
  }

  .highlights-list .hero-title {
    margin-bottom: 15px;
  }

  .highlights-list .card-title {
    max-width: 26.67vw;
  }
}