/* Add gap between the two rebate options  */
.upgrades {
    gap: var(--Padding-XXL);

    /* Reset for > 768px */
    @media (min-width: 768px) {
        gap: unset;
        margin-right: unset;
    }

    /* Remove column padding for overflow scrolling */
    > .col-12 {
        padding-left: 0;
        padding-right: 0;

        /* Reset for > 768px */
        @media (min-width: 768px) {
            padding-left: calc(var(--bs-gutter-x)* .5);
            padding-right: calc(var(--bs-gutter-x)* .5);
        }
    }

    .colour-block-bubble {
        padding: 0;
        @media (min-width: 768px) {
            padding: var(--Padding-XL) var(--Padding-M);
        }
    }

    /*  Add padding to title block */
    .title {
        padding-left: calc(var(--bs-gutter-x)* .5);
        padding-right: calc(var(--bs-gutter-x)* .5);

        /* Reset for > 768px */
        @media (min-width: 768px) {
            padding-left: unset;
            padding-right: unset;
        }
    }
    /* List of rebates with icon */
    ul.rebate-list {
        list-style: none;
        padding: 0 0.5rem;
        width: 100%;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        overflow-x: auto;
        gap: var(--Padding-XS);

        /* Change to vertical list */
        @media (min-width: 768px) {
            display: block;
            padding: 0;
        }
        /* Individual rebates list item */
        li.rebate-list-item {
            display: flex;
            min-width: 9.0625rem;
            padding-top: var(--Padding-S);
            padding-right: var(--Padding-S);
            padding-bottom: var(--Padding-S);
            padding-left: var(--Padding-S);
            margin-bottom: var(--Padding-S);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--Padding-XS);
            align-self: stretch;
            border-radius: 1.5rem 1.5rem 1.5rem 0rem;

            @media (min-width: 768px) {
                flex-direction: row;
                padding-top: 0;
                padding-right: 0;
                padding-bottom: var(--Padding-M);
                padding-left: 0;
                margin-bottom: var(--Padding-M);
                border-bottom: 1px solid var(--Light-Grey);
                width: 100%;
                border-radius: 0;
                align-items: center;
            }

            /* Icon size */
            .rebate-list-item-icon {
                width: 3.4375rem;
                height: auto;

                /* Change icon size */
                @media (min-width:768px) {
                    width: 4.25rem;
                }
            }
        }
    }
}