/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

.display-wrapper {
    position: relative;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: rgba(75, 69, 61, 0.7);
    font-variant-numeric: lining-nums;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none
}

.display-wrapper .counter-wrapper {
        position: relative;
        width: 9.4rem;
        display: flex;
        direction: row
    }

.display-wrapper .counter-wrapper .digits-display {
            font-family: "GtSectra", serif;
            font-weight: 400;
            font-size: 8rem;
            line-height: calc(9.00001em / 8);
            letter-spacing: calc(-0.06em / 8);
            width: 4.7rem;
            height: 9rem;
            overflow: hidden
        }

.display-wrapper .counter-wrapper .digits-display .digit-wrapper {
                transform: translateY(0);
                display: flex;
                flex-direction: column;
                transition: transform 0.4s ease-in-out
            }

.display-wrapper .counter-wrapper .digits-display .digit-wrapper.ten {
                    align-items: flex-end;
                }

.display-wrapper .counter-wrapper .digits-display .digit-wrapper.one {
                    align-items: flex-start;
                }

.display-wrapper .counter-wrapper .minutes {
            position: absolute;
            right: 0;
            bottom: 1rem;
            margin: 0;
            transform: translateX(100%);
        }