:root {
    --watch-height: 15vh;
}

#time-area{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: end;
}

.watch {
    position: relative;
    height: var(--watch-height);
    aspect-ratio: .7/1;
    display: grid;
    grid-template:
        "h-a h-a h-b h-b ."
        "h-a h-a h-b h-b p-a"
        "h-a h-a h-b h-b p-b"
        "h-a h-a h-b h-b ."
        "m-a m-a m-b m-b ."
        "m-a m-a m-b m-b s-a"
        "m-a m-a m-b m-b s-b"
        "m-a m-a m-b m-b ."
    ;
    border-width: 0;
    border-color: #44444433;
    border-style: solid;
    border-left-width: 2px;
    padding: 1rem;
}

.f.a{
    grid-area: f-a;
}

.h.a {
    grid-area: h-a;
}

.h.b {
    grid-area: h-b;
}

.c.a{
    grid-area: c-a;
}

.m.a {
    grid-area: m-a;
}

.m.b {
    grid-area: m-b;
}

.p.a {
    grid-area: p-a;
}

.p.b {
    grid-area: p-b;
}

.s.a {
    grid-area: s-a;
}

.s.b {
    grid-area: s-b;
}

.d {
    place-self: center;
    border: 0px solid #333;
}

.h,
.m,
.c,
.f {
    position: relative;
    font-size: calc(var(--watch-height) / 2);
    line-height: calc(var(--watch-height) / 2.5);
}

.s,
.p {
    position: relative;
    font-size: calc(var(--watch-height) / 8);
}