/**
 * Styling for the discount banner block.
 */

section.discount-banner {
    grid-column: 3 / -3;
    padding: var(--spacing-12) var(--default-padding);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
}

section.discount-banner .tagline {
    margin-bottom: var(--spacing-3);
    color: var(--color-primary-red-500);
    font: var(--font-copy-allcaps-md);
    letter-spacing: var(--font-copy-allcaps-md-spacing);
}
section.discount-banner .tagline:empty {
    display: none;
}

section.discount-banner .heading {
    margin-bottom: var(--spacing-7);
}
section.discount-banner .heading:empty {
    display: none;
}

section.discount-banner .blurb:empty {
    display: none;
}

section.discount-banner .button {
    margin-top: var(--spacing-10);
}

section.discount-banner .caption {
    margin-top: var(--spacing-5);
    font: var(--font-copy-sm);
    color: var(--color-copy-secondary);
}
section.discount-banner .caption:empty {
    display: none;
}

/* Breakpoint M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
    section.discount-banner {
        grid-column: 2 / -2;
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    section.discount-banner {
        grid-column: 1 / -1;
    }
}