.cd {
    background: #141c29;
    border-radius: 16px;
    padding: 56px 32px 48px;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
}

.cd-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 28px;
}

.cd-line {
    width: 60px; height: 1px;
    background: linear-gradient(to right, transparent, rgba(168,168,128,0.5));
}
.cd-line.r { background: linear-gradient(to left, transparent, rgba(168,168,128,0.5)); }
.cd-dot { width: 5px; height: 5px; background: #a8a880; transform: rotate(45deg); }

.cd-tag {
    margin-left: 4px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px; letter-spacing: 5px;
    text-transform: uppercase; color: #a8a880; font-weight: 300;
}

.cd-names {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px; font-weight: 300;
    color: #e8e8c8; letter-spacing: 1px;
    margin-bottom: 48px;
}

.cd-names .amp {
    font-style: italic; color: #a8a880; font-size: 0.75em;
    margin: 0 10px;
}

.cd-grid {
    width: 65%;
    display: flex;
    justify-content: space-evenly;
    flex-flow: row nowrap;
    gap: 0;
}

.cd-unit {
    flex-grow: 1;
    min-width: 0;
    aspect-ratio: 13/15;
    display: flex;
    flex-direction: column;
}

.cd-card {
    width: 100%;
    height: 100%;
    background: #1c2535;
    border: 1px solid rgba(212,212,168,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    container-type: inline-size;
}

.cd-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: rgba(212,212,168,0.025);
}

.cd-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background: rgba(212,212,168,0.1);
}

.cd-num {
    font-family: "Antonio", sans-serif;
    font-size: min(70cqw, 70cqh);
    font-weight: 300;
    color: #d4d4a8;
    line-height: 1;
    letter-spacing: -2px;
    position: relative;
    z-index: 1;
    transition: color 0.2s;
}

.cd-unit-label {
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6e7a60;
    font-weight: 300;
}

@media screen and (max-width: 767px) {
    .cd-unit-label {
        font-size: 0.5rem;
    }
    
    .cd-grid {
        width: 100%;
    }
}

.cd-sep {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    color: rgba(168,168,128,0.25);
    padding: 0 8px;
    line-height: 1;
}

.cd-sep-hidden {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    color: rgba(168,168,128,0.25);
    padding: 0 8px;
    opacity: 0;
    line-height: 1;
}

.cd-date {
    margin-top: 44px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    letter-spacing: 4px;
    color: rgba(168,168,128,0.45);
    font-weight: 300;
    text-transform: uppercase;
}

.cd-laurel {
    margin-top: 32px;
}

.flash { color: #e8e8c8 !important; transition: color 0s; }