/* BLOC DATES */
.bloc.columns{
    position: relative;
    height: 100%;
    width: 100%;    
    display: flex;    
    align-items: center;
    justify-content: center;        
}
.bloc.columns .wrapper{    
    min-height: 100px;
    width: 100%;
    max-width: 1200px; 
    margin-top: var(--gap-8);
    margin-bottom: var(--gap-8);
}

.bloc.columns .wrapper h2{
    text-align: center;
}    

.bloc.columns .wrapper .grid{      
    justify-content: center;
    justify-items: center;
    align-items: stretch;
    grid-column-gap: 0;
    grid-row-gap: calc(2 * var(--gap));
}
.bloc.columns .wrapper .grid.grid-template-1{
    grid-template-columns: repeat(1,500px);
}
.bloc.columns .wrapper .grid.grid-template-2{
    grid-template-columns: repeat(2,500px);
}
.bloc.columns .wrapper .grid.grid-template-3{
    grid-template-columns: repeat(3,400px);
}
.bloc.columns .wrapper .grid.grid-template-4{
    grid-template-columns: repeat(4,250px);
}
.bloc.columns .wrapper .grid.grid-template-5{
    grid-template-columns: repeat(5,200px);
}
.bloc.columns .wrapper .grid .item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--gap-2);
    text-align: center;
    width: 100%;
}
.bloc.columns .wrapper .grid .item:after{
    content: '';
    position: absolute;
    border-right-width: 1px;
    border-right-style: solid;
    right: 0px;
    top: 25%;
    height: 50%;    
}

.bloc.columns .wrapper .grid .item p {
    text-align: center;
}

.bloc.columns .wrapper .grid .item.border-primary:after{
  border-color: var(--color-primary);
}
.bloc.columns .wrapper .grid .item.border-secondary:after{
  border-color: var(--color-secondary);
}
.bloc.columns .wrapper .grid .item.border-white:after{
  border-color: var(--color-white);
}
.bloc.columns .wrapper .grid .item.border-black:after{
  border-color: var(--color-black);
}
.bloc.columns .wrapper .grid .item.border-grey:after{
  border-color: var(--color-grey);
}
.bloc.columns .wrapper .grid .item.border-greylight:after{
  border-color: var(--color-greylight);
}
.bloc.columns .wrapper .grid .item.border-exp-infra:after{
  border-color: var(--color-exp-infra);
}

.bloc.columns .wrapper .grid .item.border-exp-cyber:after{
  border-color: var(--color-exp-cyber);
}
.bloc.columns .wrapper .grid .item.border-exp-pdt:after{
  border-color: var(--color-exp-pdt);
}
.bloc.columns .wrapper .grid .item.border-exp-com:after{
  border-color: var(--color-exp-com);
}
.bloc.columns .wrapper .grid .item.border-exp-tra:after{
  border-color: var(--color-exp-tra);
}
.bloc.columns .wrapper .grid .item.border-exp-cloud:after{
  border-color: var(--color-exp-cloud);
}
.bloc.columns .wrapper .grid .item.border-exp-heb:after{
  border-color: var(--color-exp-heb);
}
.bloc.columns .wrapper .grid .item.border-exp-ara:after{
  border-color: var(--color-exp-ara);
}
.bloc.columns .wrapper .grid .item.border-exp-ope:after{
  border-color: var(--color-exp-ope);
}
.bloc.columns .wrapper .grid .item.border-exp-cyb:after{
  border-color: var(--color-exp-cyb);
}
.bloc.columns .wrapper .grid .item.border-mira-backup:after{
  border-color: var(--color-mira-backup);
}
.bloc.columns .wrapper .grid .item.border-mira-soc:after{
  border-color: var(--color-mira-soc);
}
.bloc.columns .wrapper .grid .item.border-mira-connect:after{
  border-color: var(--color-mira-connect);
}
.bloc.columns .wrapper .grid .item.border-mira-link:after{
  border-color: var(--color-mira-link);
}
.bloc.columns .wrapper .grid .item.border-mira-hosting:after{
  border-color: var(--color-mira-hosting);
}
.bloc.columns .wrapper .grid .item.border-mira-manage:after{
  border-color: var(--color-mira-manage);
}
.bloc.columns .wrapper .grid .item.border-none:after{
  border:  none;
}

.bloc.columns .wrapper .grid .item h3{
    font-weight: bold;
    margin-bottom: var(--gap);
}
.bloc.columns .wrapper .grid.small .item h3{
    font-size: 2rem;
    line-height: 2rem;
    min-height: 60px;    
}

.bloc.columns .wrapper .grid.regular .item h3{
    font-size: 3rem;
    line-height: 3rem;
}
.bloc.columns .wrapper .grid.large .item h3{
    font-size: 3.7rem;
    line-height: 3.7rem;
}
.bloc.columns .wrapper .grid .item img{
    width: 110px;    
    margin-bottom: var(--gap-2);    
}

@media (max-width: 768px) {
    .bloc.columns .wrapper .grid {
        grid-template-columns: repeat(1,1fr) !important;
    }
}