@import (reference) '../../common/variables.less';

.bv {
  &-container {
    background-color: @landing-sec-light-blue;
    padding: 2rem;
    margin-bottom: 75px;

    @media @md-xl {
      padding: 5rem 0;
      margin-bottom: 150px;
    }
  }

  &-list {
    display: flex;
    justify-content: center;
    line-height: 1;

    @media @xs-sm {
      flex-direction: column;
      flex-wrap: wrap;
      padding: 0;
    }
  }

  &-block {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    flex: 1 1 23%;
  }

  &-divider {
    position: relative;
    width: 50px;
    height: 100px;

    @media @md-xl {
      height: 130px;
    }

    &::after {
      content: '';
      background-color: @landing-blue;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 2px;
      transform-origin: bottom left;

      // TODO: make more explicit
      transform: rotate(0.46rad);
      height: sqrt(50 * 50 + 100 * 100);
      @media @md-xl {
        transform: rotate(0.3666rad);
        height: sqrt(50 * 50 + 130 * 130);
      }
    }
  }

  &-item {
    text-align: start;
    padding: 1rem;
    line-height: 1.2em;

    @media @lg-xl {
      padding: 1rem 2rem;
    }

    &-title {
      display: block;
    }

    &-description {
      margin: 0;
    }
  }
}
