/* All sections should have some space at the bottom. */
main > section {
    margin-bottom: 100px;
}

/* Section titles use fancy font. */
.section-title {
    font-family: "Gabriela", serif;
    letter-spacing: 1px;
}

/* Sections with offers flex. When >= 992px wide, show two columns. When narrower, make them full width. */
.offers-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    padding-bottom: 50px;
}

/* When the viewport is just small enough to wrap the offers list below the lead text, put some space between them. */
@media (max-width: 991px) {
    .section-title { text-align: center; }
    .offers-flex > .offers-lead { margin-bottom: 4em; }
    .offers-flex > .offers-list { padding-left: 0; }
}

/* When the viewport is wide enough, adjust the sideways padding in the two columns. */
@media (min-width: 992px) {
    .offers-flex > .offers-lead { flex-grow: 5; padding-left: 35px; padding-right: 40px; }
    .offers-flex > .offers-list { flex-grow: 7; padding-left: 40px; padding-right: 0; }
}

/* Each offer also flexes. */
.offers-list > article {
    padding-left: 20px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}
.offers-list > article > .offer-tag { width: 30%; }
.offers-list > article > .offer-details { width: 70%; }

/* Shrink the pricing a bit on extremely narrow viewports so that it doesn't overlap the offer details. */
@media (max-width: 450px) {
    .offers-list > article > .offer-tag strong.g-font-size-36 { font-size: 28px !important; }
}