/* Equal-height subscription cards */
@media (min-width: 768px) {
    /* Make the two main columns flex containers so their children can stretch */
    #phonics-phases-overview .row:first-of-type > .col-lg-4,
    #phonics-phases-overview .row:first-of-type > .col-md-4 {
        display: flex;
        flex-direction: column;
    }

    /* Stretch the card to fill the column height */
    #phonics-phases-overview .row:first-of-type > .col-lg-4 .card,
    #phonics-phases-overview .row:first-of-type > .col-md-4 .card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Allow content inside the card to use flex layout */
    #phonics-phases-overview .row:first-of-type > .col-lg-4 .card .card-body,
    #phonics-phases-overview .row:first-of-type > .col-md-4 .card .card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
}

/* Ensure any mt-auto inside the card pushes content to bottom */
#phonics-phases-overview .card .mt-auto {
    margin-top: auto !important;
}

.subscribe-image-container {
    display: block;
    text-align: center;
}

.subscribe-image {
    z-index: 1;
    position: relative;
    margin: auto;
}

.card {
    z-index: 0;
    border-radius: 20px;
    background-color: #DAF7FE;
    position: relative;
    top: -200px;
}

.card-body {
    margin-top: 210px;
    padding-bottom: 40px;
}

h3 {
    font-size: 2em;
    margin-bottom: 10px;
}

.subscription-benefits-container {
    display: block;
    /* keep centered horizontally, but no vertical auto margins in flex layout */
    margin: 0 auto;
    text-align: center;
}

.subscription-benefits {
    list-style-position: inside;
    display: inline-block;
    padding-left: 0;
    color: #249AD1;
    font-weight: bold;
    margin-bottom: 20px;
}

.highlight-cost {
    margin-bottom: 1.3em;
    font-style: italic;
    color: #666;
    font-size: 1.2em;
    font-family: 'papernotes' !important;
    letter-spacing: 0.1em;
}

h4 {
    font-size: 3em;
    margin: 0 !important;
    font-weight: bold !important;
    line-height: unset !important;
}

h5 {
    font-size: 1em;
    margin-top: -10px !important;
    font-weight: normal !important;
    line-height: unset !important;
}

#phonics-phases-overview .row:last-of-type {
    margin-top: -180px;
}

/* BUTTONS */

.btn-continue {
    margin-top: 20px;
    /* no vertical auto margins to avoid interfering with flex push */
    margin-left: auto;
    margin-right: auto;
}

#phonics-phases-overview .row:last-of-type {
    position: relative;
    margin-top: -180px;
    z-index: 2;
}