.vertical-tabs {
  display: flex;
  gap: clamp(1em, 8cqw, 100px);
  margin: var(--gap) auto;
  position: relative;
}
.vertical-tabs__navigation {
  flex-shrink: 0;
  flex-basis: clamp(300px, 40%, 500px);
  display: flex;
  flex-direction: column;
}
.vertical-tabs__navigation > *:first-child {
  margin-top: 0;
}
.vertical-tabs__navigation > *:last-child {
  margin-bottom: 0;
}
.vertical-tabs__navigation-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}
.vertical-tabs__navigation-item {
  --item-background-color: transparent;
  --item-background-color-hover: var(--color-white);
  --item-indicator-background-color: var(--color-primary);
  --item-indicator-background-color-hover: var(--color-secondary);
  --item-indicator-arrow-color: var(--color-white);
  --item-indicator-arrow-color-hover: var(--color-primary);
  font-size: var(--font-size-18);
  padding: 0.75em 1.2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--border-radius);
  border: 2px solid rgba(var(--color-primary-rgb), 0.2);
  font-weight: var(--font-weight-medium);
  gap: 1em;
  transition: var(--transition);
  background-color: var(--item-background-color);
  color: var(--color-primary);
}
.vertical-tabs__navigation-item:hover, .vertical-tabs__navigation-item.active {
  background-color: var(--item-background-color-hover);
  cursor: pointer;
}
.vertical-tabs__navigation-item:hover .vertical-tabs__navigation-item-indicator, .vertical-tabs__navigation-item.active .vertical-tabs__navigation-item-indicator {
  background-color: var(--item-indicator-background-color-hover);
}
.vertical-tabs__navigation-item:hover .vertical-tabs__navigation-item-indicator::after, .vertical-tabs__navigation-item.active .vertical-tabs__navigation-item-indicator::after {
  background-color: var(--item-indicator-arrow-color-hover);
}
.vertical-tabs__navigation-item-indicator {
  width: 2em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--item-indicator-background-color);
  transition: var(--transition);
  position: relative;
}
.vertical-tabs__navigation-item-indicator::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mask: var(--icon-arrow-right) center/40% auto no-repeat;
  background-color: var(--item-indicator-arrow-color);
  transition: var(--transition);
  border-radius: 50%;
  z-index: 2;
}
.vertical-tabs__contents {
  width: 100%;
  min-height: 100%;
  transition: var(--transition);
}
.vertical-tabs__item {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.3s;
  top: 50%;
  transform: translate(-1em, -50%);
}
.vertical-tabs__item.active {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
.vertical-tabs__image-wrapper {
  aspect-ratio: 2/1;
  position: relative;
  overflow: hidden;
}
.vertical-tabs__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-radius);
}
.vertical-tabs__inner {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.vertical-tabs__text > *:first-child {
  margin-top: 0;
}
.vertical-tabs__text > *:last-child {
  margin-bottom: 0;
}
.vertical-tabs__text h2,
.vertical-tabs__text h3 {
  color: var(--color-primary);
  margin-bottom: 0.5em;
  font-size: var(--font-size-30);
}
.vertical-tabs__button {
  margin-top: var(--gap);
}
.vertical-tabs__text-content-mobile {
  display: none;
}
@media screen and (max-width: 860px) {
  .vertical-tabs {
    flex-direction: column;
    gap: 1em;
  }
  .vertical-tabs__navigation-inner {
    display: none;
  }
  .vertical-tabs__contents {
    display: grid;
    gap: 4em 2em;
    grid-template-columns: 1fr 1fr;
  }
  .vertical-tabs__item {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    top: 0;
  }
  .vertical-tabs__item.active {
    transform: none;
  }
  .vertical-tabs__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
  }
  .vertical-tabs__image-wrapper {
    width: 100%;
  }
  .vertical-tabs__text-content--hide-on-mobile {
    display: none;
  }
  .vertical-tabs__text-content-mobile {
    display: block;
  }
}
@media screen and (max-width: 660px) {
  .vertical-tabs__contents {
    grid-template-columns: 1fr;
    gap: 1em;
  }
  .vertical-tabs__item {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: clamp(10px, 5cqw, 20px);
    background-color: var(--color-primary);
    color: var(--color-white);
  }
  .vertical-tabs__image {
    border-radius: var(--border-radius-smaller);
  }
}