.order-header {
    display: grid;
    font-size: var(--lttrshop-txt-s);
    line-height: var(--lttrshop-line-s);
    grid-template-areas: "order contact billing";
    column-gap: var(--lttrshop-space-l);
    margin-bottom: var(--lttrshop-space-m);
}

.order-header section p {
    margin: 0 0 var(--lttrshop-space-m) 0;
}

.order-header section h4 {
    margin: 0 0 var(--lttrshop-space-xs) 0;
    font-size: var(--lttrshop-txt-xs);
    line-height: var(--lttrshop-line-xs);
    color: var(--lttrshop-half-text-color);
    font-family: var(--lttrshop-font-family-normal);
    font-weight: var(--lttrshop-font-weight-normal);
}

.order-header section.order .order-number {
    font-family: var(--lttrshop-font-family-bold);
    font-weight: var(--lttrshop-font-weight-bold);
    font-size: var(--lttrshop-txt-xl);
    line-height: var(--lttrshop-line-xl);
}

.order-header section.order time {
    display: block;
    font-size: var(--lttrshop-txt-xs);
    line-height: var(--lttrshop-line-xs);
}

.order-header section.order .order-state {
    margin-top: var(--lttrshop-space-xs);
}

.order-header section.contact {
    grid-area: contact;
}

.order-header section.billing {
    grid-area: billing;
}

.order-header section.contact a,
.order-header section.billing a {
    color: var(--lttrshop-text-color);
    font-size: var(--lttrshop-txt-s);
    line-height: var(--lttrshop-line-s);
    text-decoration: none;
}

.order-header section.contact a:hover,
.order-header section.billing a:hover {
    opacity: var(--gamma);
}