.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 {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
}

.highlights-list .highlights-list-container {
    background-color: rgb(var(--color-background));
}

.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: 30px;
}

.highlights-list .hero-title {
  color: rgb(var(--color-text));
  margin-bottom: 14px;
  line-height: 1.15;
}

.highlights-list .hero-desc {
  color: rgb(var(--color-text));
}

.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: 40px;
  /* 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: rgb(var(--color-text));
}

.highlights-list .card-title {
    color: rgb(var(--color-text));
  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 .card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
  }

  /* Highlight card - Desktop / Mobile independent color schemes */

  .highlights-list .highlight-card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
  }

  /* 真正使用色卡的 background 变量 */
  .highlights-list .highlight-card__scheme-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: rgb(var(--color-background));
  }

  /* Desktop 默认显示 */
  .highlights-list .highlight-card__scheme-bg--desktop {
      display: block;
  }

  /* Mobile 默认隐藏 */
  .highlights-list .highlight-card__scheme-bg--mobile {
      display: none;
  }

  /* 原本的数字和文字必须位于背景上方 */
  .highlights-list .highlight-card__content {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
  }

  /* Mobile */
  @media (max-width: 959px) {
      .highlights-list .highlight-card__scheme-bg--desktop {
          display: none;
      }

      .highlights-list .highlight-card__scheme-bg--mobile {
          display: block;
      }
  }
  .highlights-list .hero-media {
      display: block;
      width: 100%;
      overflow: hidden;
      border-radius: var(--hl-media-radius, 0px);
  }

  .highlights-list .hero-media img,
  .highlights-list .hero-media video {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
  }
  /* Desktop */
  @media (min-width: 960px) {

      .highlights-list .card-list {
          position: absolute;
          inset-inline: 0;
          bottom: 0;
          width: 100%;
          z-index: 2;
      }

  }
  @media (max-width: 959px) {

      .highlights-list .card-list {
          position: static;
          width: 100%;
          margin-top: 16px;
      }

  }
  .highlights-list .card-list-grid {
      padding-inline: 50px;
      display: grid;

      grid-template-columns: repeat( {
                  {
                  section.settings.desktop_columns
              }
          }

          , 1fr);
      column-gap: 32px;
      row-gap: 16px;
      width: 100%;
      padding-top: 14px;
  }
  @media (max-width: 959px) {

      .highlights-list .card-list-grid {
          padding-inline: 2.67vw;

          grid-template-columns: repeat( {
                      {
                      section.settings.mobile_columns
                  }
              }

              , minmax(0, 1fr));

          column-gap: 12px;
          row-gap: 16px;

          padding-top: 0;
      }

  }

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

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

  
  .highlights-list .hero {
  }

  .highlights-list .hero-content {
    padding-bottom: 5.33vw;
  }

  .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 .card-title {
    max-width: 26.67vw;
  }
}