/* START STYLE NAVAJO */

#home {

    .homepage-component:has(.see-all-container.monterrey) {
        /* overflow: hidden; */
    }

    .custom-section.style-navajo .see-all-container.see-all-top {
        display: inline-block;
        margin-bottom: 1em;
    }

    .see-all-container.monterrey,
    .custom-section.style-navajo .see-all-container {
        .see-all-button {
            font-size: 16px;
            font-weight: 500;
            padding: .75em 1.5em;
            border-radius: 3px;
        }
    }

    .custom-section.style-navajo .see-all-container.see-all-top,
    .see-all-container.monterrey.see-all-top,
    .see-all-container.monterrey.see-all-above {
        overflow: hidden;
        width: calc(100% + 64px);
        margin-left: -32px;
        padding-right: 32px;
        box-sizing: border-box;
        justify-content: flex-start;

        @media screen and (max-width: 599px) {
            width: calc(100% + 40px);
            margin-left: -20px;
            padding-right: 20px;
        }

        .monterrey-header-accent-left {
            display: none;
        }

        .monterrey-header-accent {
            display: none;
        }


        .header-slot-container {
            display: inline-block;
            position: relative;
            margin-left: 55px;
            line-height: 1.2;
            text-align: left;

            @media screen and (max-width: 599px) {
                margin-left: 25px;
            }

            .cms-input {
                margin: unset;
                border: none;
                padding: 0;
                border-radius: unset;
            }

            h2 {
                line-height: inherit;
                font-size: 36px;

                @media screen and (max-width: 960px) {
                    font-size: 28px;
                }

                .header-top {
                    font-size: 18px;

                    @media screen and (max-width: 960px) {
                        font-size: 16px;
                    }
                }
            }

            /* No classes exist on these headings */
            h1,
            .header-bottom {
                text-transform: uppercase;
                font-size: 36px;
                line-height: inherit;
                margin-top: .05em;
                font-weight: 900;
                display: block;

                @media screen and (max-width: 960px) {
                    font-size: 28px;
                }
            }

            h3,
            .header-top {
                text-transform: uppercase;
                font-size: 18px;
                line-height: inherit;
                font-weight: 900;
                display: block;

                @media screen and (max-width: 960px) {
                    font-size: 16px;
                }
            }

            &::before,
            &::after {
                content: close-quote;
                display: block;
                position: absolute;
                width: calc(100% + 30px);
                height: 18px;
                top: calc(50% - 9px);
                background-color: var(--header-accent-color, var(--secondary-color));
                transition: all .25s linear;

                /* shared mask-repeat, size, position rules for both layers */
                -webkit-mask-repeat: no-repeat, repeat-x;
                mask-repeat: no-repeat, repeat-x;

                -webkit-mask-size: 100% 100%, auto 100%;
                mask-size: 100% 100%, auto 100%;

                /* two layers: gradient fade + stripes SVG */
                -webkit-mask-image:
                    var(--fade-gradient),
                    var(--stripe-mask);
                mask-image:
                    var(--fade-gradient),
                    var(--stripe-mask);

                -webkit-mask-composite: source-in;
                /* Chrome/Safari */
                mask-composite: intersect;
                /* Standard */
            }

            /* Fade left for ::before, fade right for ::after */
            &::before {
                width: 50px;
                right: calc(100% + 14px);
                --fade-gradient: linear-gradient(270deg, #000 80%, rgba(0, 0, 0, 0) 100%);
                --stripe-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 154 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='10.127' x2='154' y2='10.127' stroke='%23DC4405' stroke-width='2'/%3E%3Cline y1='1.12695' x2='154' y2='1.12695' stroke='%23DC4405' stroke-width='2'/%3E%3Cline y1='19.127' x2='154' y2='19.127' stroke='%23DC4405' stroke-width='2'/%3E%3C/svg>");
                -webkit-mask-position: right center, center;
                mask-position: right center, center;
            }

            &::after {
                max-width: 200px;
                left: calc(100% + 10px);
                --fade-gradient: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0) 100%);
                --stripe-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 154 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='10.127' x2='154' y2='10.127' stroke='%23DC4405' stroke-width='2'/%3E%3Cline y1='1.12695' x2='154' y2='1.12695' stroke='%23DC4405' stroke-width='2'/%3E%3Cline y1='19.127' x2='154' y2='19.127' stroke='%23DC4405' stroke-width='2'/%3E%3C/svg>");
                -webkit-mask-position: left center, center;
                mask-position: left center, center;
            }
        }

    }

}

/* END STYLE NAVAJO */