.block-tabs {
  padding-top: 100px;
  padding-bottom: 100px;
}

.block-tabs-nav {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid @color-gray;

  > li {
    position: relative;
    top: 1px;
    flex: 1;
  }
}

.block-tabs-link {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  color: @color-gray;
  text-align: center;
  border-bottom: 10px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;

  &:hover {
    color: @color-accent3;
  }
  &.active {
    color: @color-accent3;
    border-color: @color-accent3;
  }
}

.block-tabs-items {
  padding: 60px 60px 80px;
  background-color: #e8eff3;
}

.block-tabs-item {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;

  &.active {
    visibility: visible;
    max-height: none;
    opacity: 1;
  }
}

.block-tabs-inner {
  max-width: 400px;
}

.block-tabs-title {
  margin-bottom: 30px;
}

// responsive

@media (max-width: @screen-sm) {
  .block-tabs {
    padding-top: 0;
  }
  .block-tabs-nav {
    display: none;
  }
  .block-tabs-items {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
  }
  .block-tabs-item {
    visibility: visible;
    max-height: none;
    opacity: 1;
  }
  .block-tabs-item + .block-tabs-item {
    margin-top: 60px;
  }
}