.htabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 20px;
  border-radius: 10px 10px 0 0;
  justify-content:center;
  column-gap: 1rem;
}

.hradiotab {
  position: absolute;
  opacity: 0;
}

.htabs-label {
  width: 100%;
  padding: .8rem .5rem .5rem;
  background: var(--color-dark-blue);
  cursor: pointer;
  font-size: 1rem;
  font-size: clamp(1rem, 5vw, 1.2rem);
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  border-top:1px solid var(--color-dark-blue);
  border-right: 1px solid var(--color-dark-blue);
  border-left:1px solid var(--color-dark-blue);
  border-radius: 0;
  text-align: center;
  background: linear-gradient(to right, var(--color-purple) 50%, var(--color-dark-blue) 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
.htabs-label:last-of-type {
    border-bottom: 1px solid #ebe5f6;
}
.htabs-label:hover {
  background-position: left bottom;
}

.htabs-label:active {
	background: var(--color-white);

}

.hradiotab:checked + .htabs-label {
  background: var(--color-white);
  background: linear-gradient(to left, #fff 50%, var(--color-purple) 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  border-top: solid 1px var(
  --color-lightgrey);
  border-left: solid 1px var(
  --color-lightgrey);
  border-right: solid 1px var(
  --color-lightgrey);
  border-bottom: solid 1px var(
  --color-white);
  color: var(
  --color-dark-blue);
}

.htabs-panel {
  display: none;
  padding: 3rem 3rem 2rem;
  background: var(--color-white);
  width: 100%;
  border-top: solid 1px var(--color-lightgrey);
  border-left: solid 1px var(--color-lightgrey);
  border-bottom: solid 1px var(--color-lightgrey);
  border-right: solid 1px var(--color-lightgrey);
  border-radius: 0;
}


.hradiotab:checked + .htabs-label + .htabs-panel {
  display: block;
  margin-top: -1px;
}

.htabs-panel-content h3 {
    color: var(--color-purple);
    font-size: var(--fs-title-s);
    font-size: var(--clamp-title-s);
}
.htabs-panel-content h3:not(:first-of-type) {
    margin-top: 1.5em;
}

  #ctem_wheel .htabs-panel-content {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 2rem;
    font-size: var(--fs-text-l);
	  font-size: var(--clamp-text-l);
}

@media (min-width: 640px) {
  .htabs-panel {
    order: 99;
	  border-radius: 3px;
  }

  .htabs-label {
    width: 25%;
    border-radius: 3px 3px 0 0;
    border-bottom: solid 1px var(--color-lightgrey);
    margin-top: 2px;
    z-index: 100;
    position: relative;
  }
.htabs.tabcount_5 .htabs-label {
    width: 100%;
  }
#ctem_wheel .htabs-panel-content {
    grid-template-columns: auto 30vw;
}



.htabs-label:last-of-type {
    border-bottom: 0;
}

}
@media (min-width:1024px) {
    .htabs.tabcount_5 .htabs-label {
    width: 18%;
  }
}