//
//  Mobile & common
//  ---------------------------------------------

& when (@media-common = true) {
  .countdown-home-title {
    .count-down-home {
      [class*="countdown-home-black-friday"] {
        display: flex;
        gap: 3px;
        align-items: center;
        font-size: 24px;

        span {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .font-700-accent();
          line-height: 1;
          color: @white;
          background-color: @black;
          border-radius: @size-spacing-2;
          text-align: center;
          height: @size-spacing-16;
          width: @size-spacing-16;

          &::after {
            content: '';
            display: block;
            padding-top: @size-base-grid;
            .font-200();
          }

          &:nth-child(1)::after {
            content: 'días';
          }

          &:nth-child(2)::after {
            content: 'horas';
          }

          &:nth-child(3)::after {
            content: 'minutos';
          }

          &:nth-child(4)::after {
            content: 'segundos';
          }
        }
      }
    }
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .count-down-home {
    padding: 12px 20px;
    color: @white;
    background-color: @brand-secondary-500;
    border-radius: 10px;
    flex-direction: column;
  }

  .title-countdown{
    text-align: center;
    font-weight: 400;
  }

  .countdown-home-container-section{
    height: 165px;
  }

  .countdown_title_timer{
    float: left;
    font-weight: 600;
    font-size: 25px;
    padding: 10px;
  }

}

//
//  Desktop
// ---------------------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  .count-down-home {
    [class*="countdown-home-black-friday"] {
      margin-top: 0;
      position: relative;

      &::before {
        color: @white;
        top: -@size-spacing-5;
        text-align: center;
        .font-200();
      }

      span {
        .font-800-accent();
        line-height: 1;
      }
    }
  }

  .countdown_title_timer{
      float: left;
      font-weight: 600;
      font-size: 25px;
      padding: 10px;
  }

  .title-countdown{
    text-align: center;
    font-weight: 400;
  }

  .count-down-home {
    flex-direction: row;
  }
}
.content-slider-custom-cart{
  background-color: @color-background-cart-slider;
}