#page--rewardspage .content {
    padding: 0;
}

.rewards.rewards-landing {
    --action-max-width: 283px;
    --action-height: 42px;
    letter-spacing: -0.04em;
    color: var(--color-blue-violet);

    > header {
        --header-height: 255px;
        --fs-h2: var(--fs-h1-lg);
        color: var(--color-white);

        > div {
            width: var(--header-div-width, 340px);
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            align-items: center;
            padding-top: 1rem;
            margin-inline: auto;

            svg {
                width: var(--header-icon-size, 90px);
                height: auto;
                margin-right: -2.5rem;
            }

            h1 {
                --fs-h1: 48px;
                --h1-line-height: 37px;
                display: inline-block;
                width: min-content;
                text-align: left;
                align-self: end;
                margin-bottom: 0.25rem;
            }

            p {
                grid-column: span 2;
                line-height: 1;
                margin-block: 0;
            }
        }
    }

    > section {
        margin: 4rem 1rem;
    }

    .container {
        max-width: 857px;
    }

    .rewards__section-title {
        margin-bottom: 0.5rem;
        font-size: 1.625rem;
    }

    .image-strip-container {
        margin-inline: 0;
        margin-block: -4.5rem -2.5rem;
    }

    .framed-benefits {
        display: grid;
        grid-template-columns: minmax(0, 270px);
        gap: 0.75rem 1.5rem;
        margin-block: 0;
        padding-left: 0;
        list-style: none;
        justify-content: center;

        .framed-benefits__item {
            position: relative;
            padding: 0.5rem 1rem 1.5rem;
            border: 1px solid var(--color-light-silver);
            border-radius: 0.5rem;
            box-sizing: border-box;
        }

        .framed-benefits__benefit {
            font-size: 30px;
            font-family: var(--header-font), Helvetica, Arial, sans-serif;
            font-weight: 400;
            line-height: 0.9;
            letter-spacing: -0.03em;
            margin: 0;
        }

        .framed-benefits__lozenge {
            position: absolute;
            bottom: 0;
            right: -1rem;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            background-color: var(--bg-color-lozenge);
            color: var(--color-lozenge);
            font-size: 1.25rem;
            font-weight: 700;
            box-sizing: border-box;

            .framed-benefits__item:nth-child(odd) & {
                transform: rotate(7deg);
            }

            .framed-benefits__item:nth-child(even) & {
                transform: rotate(-7deg);
            }

            .framed-benefits__item:nth-child(3n + 1) & {
                --bg-color-lozenge: var(--color-gargoyle-gas);
                --color-lozenge: var(--color-persimmon);
            }

            .framed-benefits__item:nth-child(3n + 2) & {
                --bg-color-lozenge: var(--color-pale-blue);
                --color-lozenge: var(--color-lapis-lazuli);
            }

            .framed-benefits__item:nth-child(3n) & {
                --bg-color-lozenge: var(--color-blood);
                --color-lozenge: var(--color-persimmon);
            }
        }
    }

    .rewards-join {
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 700px;
        margin-inline: auto;

        .rewards-join__title {
            margin-bottom: 0;
            font-size: 2rem;
        }

        .rewards-join__footnote {
            margin-block: 0 1rem;
            font-size: 1rem;
        }

        .rewards-join__action {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column-reverse;
            gap: 0.625rem 1rem;

            > .btn {
                --btn-border: 2px solid var(--color-primary);
                width: 100%;
                max-width: var(--action-max-width);
                height: var(--action-height);
                box-sizing: border-box;
            }
        }
    }

    #benefits-title {
        --scroll-offset: 50px;
        scroll-margin-top: var(--scroll-offset);
    }

    .rewards-landing__action {
        display: flex;
        justify-content: center;
        margin-top: 3rem;

        > .btn {
            width: 100%;
            max-width: var(--action-max-width);
            height: var(--action-height);
            box-sizing: border-box;
        }
    }

    @media (min-width: 1024px) {
        --action-max-width: 250px;
        --action-height: 50px;

        #benefits-title {
            --scroll-offset: 160px;
        }

        > header {
            --header-height: 211px;
            --header-div-width: 800px;

            > div {
                svg {
                    --header-icon-size: 133px;
                    grid-row: span 2;
                    margin-right: -1.5rem;
                }

                h1 {
                    --fs-h1: 62px;
                    --h1-line-height: 1;
                    grid-column-start: 2;
                    grid-row-start: 1;
                    width: 100%;
                    align-self: end;
                    margin-bottom: 0;
                }

                p {
                    grid-column: 2;
                    grid-row: 2;
                    font-size: 20px;
                    align-self: start;
                }
            }
        }

        > section {
            margin-inline: auto;
        }

        .image-strip-container {
            margin-block: -2rem;
        }
        .rewards__section-title {
            margin-bottom: 1rem;
            font-size: 2.25rem;
        }

        .framed-benefits {
            grid-template-columns: repeat(3, minmax(0, 270px));

            .framed-benefits__item {
                padding-bottom: 1rem;
            }

            .framed-benefits__lozenge {
                font-size: 1rem;
            }
        }

        .rewards-join {
            .rewards-join__title {
                font-size: 2.75rem;
            }

            .rewards-join__footnote {
                margin-bottom: 1.5rem;
            }

            .rewards-join__action {
                flex-direction: row;
            }
        }
    }
}