html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
    background-color: purple;
}

.until {
    margin: 25px;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    padding: 1em;
    background-color: red;
    border-radius: 5px;
    box-shadow: 0 0 5xp rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
    }

    .until__component {
        text-align: center;
        background: white;
        border-radius: 5px;
        }

    .until__numeric {
        color: #333333;
        padding: 0.5em;
        font-size: 3em;
        font-weight: bold;
        }

    .until__unit{
        font-size: 1.2em;
        padding-bottom: 1em;
        font-weight: bold;
        color: #94001B
    }

    .until__event {
        grid-column: span 4;
        text-align: center;
        font-weight: bold;
    }

    .until__wedding {
        grid-column: span 4;
        text-align: center;
        font-weight: bold;
    }

    .until__cruise {
        grid-column: span 4;
        text-align: center;
        font-weight: bold;
    }

    .cruise {
        margin: 25px;
        max-width: 600px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1em;
        padding: 1em;
        background-color: #009578;
        border-radius: 5px;
        box-shadow: 0 0 5xp rgba(0, 0, 0, 0.3);
        font-family: sans-serif;
        }

        .cruise__component {
            text-align: center;
            background: white;
            border-radius: 5px;
            }

        .cruise__numeric {
            color: #333333;
            padding: 0.5em;
            font-size: 3em;
            font-weight: bold;
            }

        .cruise__unit{
            font-size: 1.2em;
            padding-bottom: 1em;
            font-weight: bold;
            color: #94001B
        }

        .cruise__event {
            grid-column: span 4;
            text-align: center;
            font-weight: bold;
        }

    .line {
        border-bottom: 5px solid red;
        margin-top: 5px;
        margin: 5px auto;
        width: 90%;        
    }

    .horizontal_line {
        border-bottom: 10px solid blue;
        margin-top: 10px;
        margin: 10px auto;
        width: 90%;        
    }