/*---Count-down---*/

#count-down {
  position: relative;
  text-align: center;
  display: inline-block;

  .clock-presenter {
    height: 80px;
    padding: 0px;
    text-align: center;

    .digit {
      margin-block-start: 5px;
      font-size: 1.5rem;
      color: rgb($white) ;
      line-height: 60px;
      height: 60px;
      display: inline-block;
      overflow: hidden;
      text-align: center;
      position: relative;
      cursor: default;
      font-weight: 600;
      border-radius: 50%;
    }

    width: 68px;
    height: 68px;
    float: $float-start;
    margin-block-start: 0;
    margin-inline-end: 20px;
    margin-block-end: 0;
    margin-inline-start: 0;
    border-radius: 3px;
    background-size: cover;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      background: linear-gradient(to left, #{$primary} 0%, #{$primary} 100%) !important;
      inset-inline-start: 0;
      inset-block-start: 0;
      inset-block-end: 0;
      inset-inline-end: 0;
      display: block;
      border-radius: 15%;
    }

    .note {
      position: relative;
      margin-block-end: 0px;
      cursor: default;
      font-size: 16px;
      opacity: 0.7;
    }
  }
}

@media (max-width: 568px) {
  #count-down .clock-presenter {
    float: none !important;
    margin-block-end: 45px;
  }
}