.unslider > ul > li > .div-img {
    width:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.unslider-nav {
    position: relative;
    margin-top: -40px;
    height: 40px;
}

.info-img-container {
    position: relative;
    overflow: hidden;
    height: 512px;
}

@media screen and (max-width: 767px){
	#subscribe {
        height: unset !important;
    }
} 

.info-block {
    max-height: 512px;
    height: 512px;
}

.info-img {
    height: 512px;
    background-position: center;
    background-size: auto 512px;
}

/* On wider screens, keep the image blocks at the 16:9 ratio of their
   1920x1080 backgrounds so the full image is covered instead of being
   cropped by the fixed 512px height.

   Every card in the grid follows the ratio -- the promo cards and the
   latest-post card alike -- because they sit two to a row. Ratio cards next
   to a fixed 512px card end on different lines, which is what left the white
   gap under Gospel Conversations. Matching them keeps each row flush. */
@media (min-width: 768px) {
    /* Bootstrap 3 floats these columns, so each card ends wherever its own
       content ends and the shorter of a pair leaves a white band beneath it.
       Flex the row instead: same two-up layout (the columns keep their 50%
       widths and wrap in pairs), but now both cards on a line are stretched to
       the height of the taller one. The clearfix pseudo-elements would become
       stray flex items, and .xs-divider is a mobile-only spacer, so both go. */
    .row.no-gutters.unmarg {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .row.no-gutters.unmarg::before,
    .row.no-gutters.unmarg::after,
    .row.no-gutters.unmarg > .xs-divider {
        display: none;
    }

    .info-block:has(.info-img-container) {
        height: auto;
        max-height: none;
    }

    /* The newsletter column is the tall card on its row. It was pinned to a flat
       512px, which both capped it (the form spilled out of the grey panel at
       narrow desktop widths) and stopped it stretching. Size it to the form
       instead, with 512px kept as the floor, and let stretch match the post
       card to it. */
    #subscribe.info-block {
        height: auto;
        min-height: 512px;
        max-height: none;
    }

    /* The row is a flex container (below), so each column is already stretched
       to the height of the tallest card on its line. `height: 100%` makes the
       card fill that, and the 16:9 ratio stays as the card's *natural* height:
       percentage heights resolve to auto while the browser measures the line,
       so the ratio is still what each card contributes to the row -- it only
       gets overridden once the line has a height to stretch into. */
    .info-block:has(.info-img-container) .info-img-container {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
    }

    .info-block:has(.info-img-container) .info-img {
        height: 100%;
        padding-top: 0;
    }

    /* The latest-post card sits inside .feature > a.block, so both links in the
       chain need a height for the card to reach the bottom of the column --
       otherwise the newsletter form (the taller card on that row) leaves a
       white band under the post image. The 60px bottom margin on .feature would
       reopen the same gap, so it goes too. */
    .info-block:has(.info-img-container) .feature:not(.boxed) {
        margin-bottom: 0;
        height: 100%;
    }

    .info-block:has(.info-img-container) .feature > a.block {
        height: 100%;
    }

    /* The theme centres this card's text with `top: 50%; translateY(-50%)`, and
       drops that on any viewport under 600px tall -- a rule written for
       full-height hero sections, where a short window should start content at
       the top. These cards are a fixed ratio and have nothing to do with the
       window height, so it just pins the post title to the top of the card,
       under the "Latest Post" pill.

       Centre with the box instead of with offsets: the card becomes a flex
       column and the text is centred as a flex item, which no top/transform
       rule from the theme can reach. The offsets are zeroed so the two
       mechanisms can't stack. Scoped to 768px up, so the theme's mobile
       top-align still stands. */
    .info-block:has(.info-img-container) .info-img-container.imagebg {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .info-block:has(.info-img-container) .pos-vertical-center {
        top: 0;
        transform: none;
        -webkit-transform: none;
        width: 100%;
    }
}

/* Just above the stacking breakpoint the columns are at their narrowest, the
   post title wraps to three lines, and the text outgrows a 16:9 box. A floor
   keeps the CTA inside the card. Every card in the grid takes the same floor,
   so the rows stay flush; the promo art gains a few pixels of crop. */
@media (min-width: 768px) and (max-width: 800px) {
    .info-block:has(.info-img-container) .info-img-container {
        min-height: 230px;
    }
}

/* Same squeeze, other symptom: between 768 and 991 the post card's text fills
   nearly the whole 16:9 box, so the centred title runs under the "Latest Post"
   pill (and moving the pill down only puts it on the CTA instead). Drop the
   pill for those widths -- the card's own "Read the Latest Post" button already
   says the same thing. Delete this block to keep the pill and accept the
   overlap. */
@media (min-width: 768px) and (max-width: 991px) {
    .info-block:has(.info-img-container) .label {
        display: none;
    }
}

.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}
.row.no-gutters .padded {
    padding: 30px;
}

.subscribe-combine {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.no-wrap {
    white-space: nowrap;
}

.unslider-nav ol li {
    width: 12px;
    height: 12px;
    border-radius: 6px;
}


/*  SM FEATURES  */
.feature.boxed {
    margin-bottom: 0px;
}



/*  HERO SLIDER  */
.home-hero-height {
    height: 90vh;
}
.slider[data-paging="true"]:not(section) {
    margin-bottom: 0;
}
.slider[data-paging="true"]:not(section) .flickity-page-dots {
    bottom: 30px;
    pointer-events: auto;
    z-index: 10;
}
.slider[data-paging="true"]:not(section) .flickity-page-dots .dot {
    width: 50px;
    height: 3px;
    border-radius: 3px;
    opacity: 1;
    background: rgba(255, 255, 255, .4);
    box-shadow: 0px 0px 10px rgba(46, 47, 51, .3);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: white;
    border-radius: 6px;
    pointer-events: none;
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot.is-selected {
    background: rgba(255, 255, 255, .4);
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot.is-selected::before {
    animation: loadBar 7s linear forwards;
}

@keyframes loadBar {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.card__top img {
    width: 100%;
}

.card {
    padding-bottom: 20px;
}

.buy-card {
    padding-top: 10px;
    text-align: center; 
    /* display: flex;  */
    align-content: space-between; 
    justify-content: space-around; 
    flex-wrap: wrap;
    
    .btn {
        border: white;
        border-width: 1px;
        border-style: solid;
        padding-top: 10px;
        margin-left: 0;
    }
}

.card__body {
    min-height: 260px;
}