.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) {
    .info-block:has(.info-img-container) {
        height: auto;
        max-height: none;
    }

    .info-block:has(.info-img-container) .info-img-container {
        height: auto;
        aspect-ratio: 16 / 9;
    }

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

    /* The latest-post card sits inside .feature, whose 60px bottom margin would
       reopen the gap this rule just closed. Nothing else in the chain needs a
       height: the container sizes itself from the ratio. (Don't give the card's
       a.block a height -- the markup nests an anchor inside an anchor, so the
       parser rebuilds it as a child of the container, and sizing it pushes the
       post title out of the card.) */
    .info-block:has(.info-img-container) .feature:not(.boxed) {
        margin-bottom: 0;
    }

    /* 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;
}