.bngine--builds {
  &-top {
    display: flex;
    @include fluid(margin-bottom, 320px, 1850px, 30px, 70px);
    .staging {
      margin-right: auto;
    }
  }
  &-running-job {
    margin-bottom: 30px;
  }
  &-jobs {
    width: 100%;
    margin-bottom: 46px;
    &-title {
      font-size: 32px;
      line-height: 1.25;
      font-weight: 400;
      margin-bottom: 30px;
    }
    &-none {
      color: rgba(var(--grey), 1);
      font-weight: 400;
      font-size: 24px;
      margin-top: 30px;
    }
  }
  &-list {
    list-style-type: none;
    &-item {
      border-bottom: 1px solid rgba(var(--grey), 0.5);
      padding: 15px 0;
      position: relative;
      &:first-of-type {
        font-weight: 600;
      }
    }
    &-number {
      padding-left: 10px;
    }
    &-status {
      font-weight: 600;
      &_success {
        color: rgba(var(--green), 1);
      }
      &_fail {
        color: rgba(var(--red), 1);
      }
      &_queue {
        color: rgba(var(--pink), 1);
      }
      &_running {
        color: rgba(var(--dark), 1);
      }
    }
    &-branch {
      font-style: italic;
    }
    &-eye {
      display: flex;
      .bcmsButton_ghost {
        padding-top: 0;
        padding-bottom: 0;
        span {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        svg {
          width: 24px;
          height: 24px;
          fill: rgba(var(--grey), 1);
          transition: fill 0.34s ease;
        }
        &:hover,
        &:focus {
          svg {
            fill: rgba(var(--dark), 1);
          }
        }
      }
    }
  }
  &-cols {
    display: grid;
    grid-template-columns: 50px 80px 80px 100px 100px 80px 80px 80px;
    grid-gap: 20px;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.16px;
    align-items: center;
    justify-content: space-between;
  }

  @include media(1400px, 'max') {
    &-list {
      &-item {
        grid-template-columns: 1fr;
        padding: 20px 0 20px;
        border-bottom: 1px solid rgba(#1e1e38, 0.2);
        margin-bottom: 0 !important;
        &:first-of-type {
          display: none;
        }
        & > * {
          &:not(:last-child) {
            grid-column: 1/2;
          }
          &:last-child {
            grid-column: 2/3;
            grid-row: 1;
          }
          &:first-child {
            padding-left: 0;
            &::before {
              display: none;
            }
          }
        }
        &-col {
          &::before {
            content: attr(data-column-name);
            width: 60px;
            display: inline-block;
            font-style: normal;
            font-weight: 600;
            color: rgba(var(--grey), 1);
            font-size: 12px;
            line-height: 1.2;
          }
        }
      }
    }
  }
}