@layer timer {
    .timer {
        display: flex;
        justify-content: space-between;
        margin-right: 27px;
        margin-bottom: 6px;
        gap: 50px;
    }
    .time-count__item {
        width: 70px;
        display: flex;
        flex-flow: column;
        align-items: center;
        position: relative;
    }
    .time-count__val {
        font-weight: 400;
        font-size: 50px;
        line-height: 1;
    }
    .time-count__text {
        font-weight: 200;
        font-size: 13.58px;
        line-height: 1;
        margin-top: 5px;
        text-transform: uppercase;
    }
    .pie {
        display: block;
        width: 107px;
        height: 107px;
        border-radius: 50%;
        transform: rotate(-90deg);
        position: absolute;
        bottom: -22px;
        left: -18px;
        /* z-index: -1; */
    }
    .background {
        fill: none;
        stroke: var(--color-white);
        opacity: 0.5;
        stroke-width: 4;
    }

    .chart {
        fill: none;
        stroke: var(--color-primary);
        stroke-width: 4;
    }

    @media screen and (max-width: 992px) {
        .timer {
            margin-bottom: 15px;
            width: 100%;
            justify-content: space-between;
            gap: 0;
        }

        .time-count__item {
            width: 35px;
        }

        .time-count__val {
            font-size: 24px;
        }

        .time-count__text {
            font-size: 8px;
        }

        .pie {
            width: 63px;
            height: 63px;
            left: -14px;
            top: -12px;
        }
    }
}