.buttons {
  margin-bottom: 32px;
}
.card {
  padding: 16px;
  border: #86898E solid 1px;
  background-color: #F5F4F4;
  border-radius: 8px;
}

.title {
  position: relative;
  margin-bottom: 42px;
  text-align: center;
  font-size: 1.5rem;

  &:before, &:after, .label {position: absolute; background-color: #86898E; content: '';}
  &:before {top: 100%; left: 50%; width: 1px; height: 42px;}
  &:after {bottom: -45px; left: calc(50% - 3px); width: 7px; height: 7px; border-radius: 20px;}
  .label {bottom: - 32px; left: 0; width: 100%; text-align: center; font-size: 0.875rem; background-color: #ffffff;}
}

.columns {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding-top: 27px;
  .column {
    position: relative;
    width: 25%;
    flex-shrink: 1;
    .head {
      display: flex;
      height: 112px;
      justify-content: center;
      align-items: center;
      font-weight: 700;
    }

    &:before, &:after, .head:before, .head:after {
      position: absolute;
      background-color: #86898E;
      content: '';
    }

    &:before {bottom: 100%; left: 50%; width: 1px; height: 32px;}
    &:after {top: -32px; left: calc(50% - 3px); width: 7px; height: 7px; border-radius: 20px;}
    .head:before {top: -29px; left: -5px; right: 50%; height: 1px;}
    .head:after {top: -29px; left: 50%; right: -5px; height: 1px;}

    &:first-child .head:before {content: none;}
    &:last-child .head:after {content: none;}
  }

}


.cells {
  .cell {
    position: relative;
    margin: 24px 0 0 32px;

    &:before, &:after, .card:before, .card:after {position: absolute; background-color: #86898E; content: '';}
    &:before {top: 20px; left: -20px; width: 20px; height: 1px;}
    &:after {top: 17px; left: -23px; width: 7px; height: 7px; border-radius: 20px;}

    .card {
      &:before {top: -24px; left: -20px; width: 1px; height: 44px;}
      &:after {top: 20px; bottom: 0; left: -20px; width: 1px;}
    }

    &:last-child .card:after {
      content: none;
    }


    .advisory {
      margin-bottom: 32px;
      &:last-child {
        margin-bottom: 0;
      }
      .caption {
        cursor: pointer;
      }
      .info {
        max-height: 0;
        margin: 8px -8px -8px;
        overflow: hidden;
        transition: max-height 0.3s;
        .in {
          padding: 8px;
          border: #CFD1D4 solid 1px;
          border-radius: 4px;
          background-color: #ffffff;
          font-size: 0.875rem;
        }
        p {
          margin: 0 0 8px;
          &:last-child {
            margin: 0;
          }
          &.icon {
            padding-left: 28px;
            background: transparent none 0 0 no-repeat;
            line-height: 20px;
            &.phone {background-image: url('~src/assets/images/icons/phone_20.svg');}
            &.email {background-image: url('~src/assets/images/icons/email_20.svg');}
          }
        }
      }

      &.active {
        .info {
          max-height: 500px;
        }
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .title {
    span {
      font-size: 1rem !important;
    }
    &:after, &:before {
      background: none;
    }
  }
  .columns {
    display: block;
    padding-top: 0;
    .column {
      margin-bottom: 24px;
      width: 100%;
      &:after {
        visibility: hidden;
      }
      &:before {
        display: none;
        background: none;
      }
      .head {
        height: auto;
        &:after, &:before {
          height: 0;
        }
      }
    }
  }
}
