@use "../../../../src/scss/utilities.scss";
.deliCounters {
  h2.deliCounters__titulos{
      @extend %VFSans-font;
      color: #004976;
      font-size: 2rem;
      font-weight: 600;
  }
  h3.deliCounters__titulos{
    @extend %openSans-font;
      color: #27251f;
      font-size: 1.2rem !important;
      font-weight: normal;
  }
  
  &__title {
    @extend %VFSans-font;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.37;
    text-align: center;
    color: var(--a-blanco);
    @media (max-width: 991.98px) {
      font-size: 25px;
    }
  }
  &__container{
    .deliCounters__item:nth-child(4n+1) {
      background: #06aef6;
    }
    
    .deliCounters__item:nth-child(4n+2) {
      background: var(--cerulean); 
    }
    
    .deliCounters__item:nth-child(4n+3) {
      background: #0079ad; 
    }
    
    .deliCounters__item:nth-child(4n+4) { 
      background: #00539e; 
    }
    .deliCounters__item:hover{ 
      background: var(--imgbg) , linear-gradient(to bottom, rgba(6, 103, 145, 0.5), rgba(6, 103, 145, 0.5));
      background-blend-mode: multiply;
      background-size: cover;
      background-position: center;
      .deliCounters__item--counter , .deliCounters__item-textbefore{
        color: var(--a-blanco);
      }
    }
  }
  &__item {
    @extend %VFSans-font;
    color: var(--a-blanco);
    font-size: 2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    min-height: 200px;
    transition: all .2s ;
    cursor: pointer; 
    @media (max-width: 768px) {
      gap: 0px;
      min-height: 150px;
    }
    &-textbefore{
      @extend %VFSans-font;
      font-size: 3rem !important;
      font-weight: 600;
      color: transparent;
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--a-blanco);
      text-stroke-width: 2px;
      text-stroke-color: var(--a-blanco);
      @media (max-width: 768px) {
        font-size: 1.5rem !important;
      }
    }
    &--counter {
      @extend %VFSans-font;
      font-size: 3rem !important;
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: 1.88px;
      color: transparent;
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--a-blanco);
      text-stroke-width: 2px;
      text-stroke-color: var(--a-blanco);
      min-width: max-content;
      @media (max-width: 768px) {
        font-size: 1.5rem !important;
        min-width: fit-content;
        padding: 1rem;
      }
    }
    &--description {
      @extend %VFSans-font;
      font-size: 3rem;
      line-height: 1.5;
      background-color: transparent;
      color: var(--a-blanco);
      @media (max-width: 768px) {
        font-size: 1.1rem !important;
      }
      p {
        margin-top: 0px;
        margin-bottom: 0px;
      }
      strong {
        font-weight: 600;
      }
    }
  }
}