
.top-pib-grid{
  --top-pib-cols: 3;
  --top-pib-gap: 22px;
  display:grid;
  grid-template-columns: repeat(var(--top-pib-cols), minmax(0,1fr));
  gap: var(--top-pib-gap);
}

.top-pib-step{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:var(--top-pib-gap);
  min-width:0;
}

.top-pib-card{
  --top-pib-icon-col: 92px;
  position:relative;
  display:grid;
  grid-template-columns: var(--top-pib-icon-col) minmax(0,1fr);
  width:100%;
  min-width:0;
  border:1px solid #2f3944;
  border-radius:18px;
  overflow:hidden;
  background:#161e27;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

.top-pib-icon-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  border-right:1px solid rgba(255,255,255,.10);
  background:#ff7a00;
  min-height:100%;
  padding:18px 14px;
}

.top-pib-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.top-pib-icon i{
  font-size:30px;
  line-height:1;
  color:#fff;
}

.top-pib-icon svg{
  width:30px;
  height:30px;
  fill:#fff;
}

.top-pib-number{
  position:absolute;
  top:10px;
  left:10px;
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  line-height:1;
  background:#fff;
  color:#111;
}

.top-pib-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:0;
}

.top-pib-title{
  margin:0 0 8px;
  color:#fff;
  font-size:20px;
  line-height:1.25;
  font-weight:700;
}

.top-pib-text{
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.6;
}

.top-pib-arrow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
}

.top-pib-arrow i{
  font-size:24px;
  line-height:1;
  color:#ff7a00;
}

.top-pib-arrow svg{
  width:24px;
  height:24px;
  fill:#ff7a00;
}

@media (max-width: 1024px){
  .top-pib-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .top-pib-grid{
    grid-template-columns: 1fr;
  }

  .top-pib-step{
    flex-direction:column;
    gap:12px;
  }

  .top-pib-arrow{
    justify-content:center;
    transform:rotate(90deg);
  }

  .top-pib-card{
    grid-template-columns: 74px minmax(0,1fr);
  }

  .top-pib-title{
    font-size:18px;
  }

  .top-pib-text{
    font-size:14px;
  }
}


.top-pib-card{
  column-gap:18px;
}
.top-pib-icon-wrap{
  border-radius:0;
}
