#home {
    @media screen and (min-width: 1199px) {
        .main:has(.right-sidebar + .right-sidebar) {

            display: flex;
            overflow: hidden;

            .homepage-component {
                height: 100%;

                &>div {
                    height: 100%;

                    &>div {
                        height: 100%;
                    }
                }
            }

            .first.right-sidebar {
                padding-right: 100px;

                div:has(>.see-all-container) {
                    position: relative;

                    &:after {
                        content: close-quote;
                        display: block;
                        position: absolute;
                        width: 16px;
                        height: 100%;
                        top: 0;
                        right: -42px;
                        background-color: var(--header-accent-color, var(--secondary-color));
                        transition: all .25s linear;

                        /* Layer 1: vertical gradient fade (top & bottom transparent) */
                        /* Layer 2: original bar mask */
                        -webkit-mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");
                        mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");

                        -webkit-mask-repeat: no-repeat, repeat-y;
                        mask-repeat: no-repeat, repeat-y;

                        -webkit-mask-size: 100% 100%, var(--link-size);
                        mask-size: 100% 100%, var(--link-size);

                        -webkit-mask-position: center, center;
                        mask-position: center, center;

                        /* Composite mode so gradient and stripes intersect */
                        -webkit-mask-composite: source-in;
                        /* Chrome/Safari */
                        mask-composite: intersect;
                        /* Firefox */
                    }

                    div:has(>.see-all-container) {
                        &:after {
                            display: none;
                        }
                    }
                }
            }
        }

        .main:has(.half-sidebar + .half-sidebar) {

            display: flex;
            overflow: hidden;

            .homepage-component {
                height: 100%;

                &>div {
                    height: 100%;

                    &>div {
                        height: 100%;
                    }
                }
            }


            .last.half-sidebar {
                box-sizing: border-box;
                padding-left: 50px;
            }

            .first.half-sidebar {
                padding-right: 50px;
                box-sizing: border-box;

                div:has(>.see-all-container) {
                    position: relative;

                    &:after {
                        content: close-quote;
                        display: block;
                        position: absolute;
                        width: 16px;
                        height: 100%;
                        top: 0;
                        right: -42px;
                        background-color: var(--header-accent-color, var(--secondary-color));
                        transition: all .25s linear;

                        /* Layer 1: vertical gradient fade (top & bottom transparent) */
                        /* Layer 2: original bar mask */
                        -webkit-mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");
                        mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");

                        -webkit-mask-repeat: no-repeat, repeat-y;
                        mask-repeat: no-repeat, repeat-y;

                        -webkit-mask-size: 100% 100%, var(--link-size);
                        mask-size: 100% 100%, var(--link-size);

                        -webkit-mask-position: center, center;
                        mask-position: center, center;

                        /* Composite mode so gradient and stripes intersect */
                        -webkit-mask-composite: source-in;
                        /* Chrome/Safari */
                        mask-composite: intersect;
                        /* Firefox */
                    }

                    div:has(>.see-all-container) {
                        &:after {
                            display: none;
                        }
                    }
                }
            }
        }

        .main:has(.left-sidebar + .left-sidebar) {
            display: flex;
            overflow: hidden;

            .homepage-component {
                height: 100%;

                &>div {
                    height: 100%;

                    &>div {
                        height: 100%;
                    }
                }
            }

            .last.left-sidebar {
                padding-left: 100px;
                box-sizing: border-box;

                div:has(>.see-all-container) {
                    position: relative;

                    &:before {
                        content: close-quote;
                        display: block;
                        position: absolute;
                        width: 16px;
                        height: 100%;
                        top: 0;
                        left: -64px;
                        background-color: var(--header-accent-color, var(--secondary-color));
                        transition: all .25s linear;

                        /* Layer 1: vertical gradient fade (top & bottom transparent) */
                        /* Layer 2: original bar mask */
                        -webkit-mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");
                        mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");

                        -webkit-mask-repeat: no-repeat, repeat-y;
                        mask-repeat: no-repeat, repeat-y;

                        -webkit-mask-size: 100% 100%, var(--link-size);
                        mask-size: 100% 100%, var(--link-size);

                        -webkit-mask-position: center, center;
                        mask-position: center, center;

                        /* Composite mode so gradient and stripes intersect */
                        -webkit-mask-composite: source-in;
                        /* Chrome/Safari */
                        mask-composite: intersect;
                        /* Firefox */
                    }

                    div:has(>.see-all-container) {
                        &:before {
                            display: none;
                        }
                    }
                }
            }
        }

        .main:has(.one-third + .one-third + .one-third) {
            display: flex;
            overflow: hidden;

            .homepage-component {
                height: 100%;

                &>div {
                    height: 100%;

                    &>div {
                        height: 100%;
                    }
                }
            }

            .first.one-third {
                box-sizing: border-box;
                padding-right: 33px;
            }

            .middle.one-third {
                box-sizing: border-box;
                padding-left: 33px;
                padding-right: 33px;

                div:has(>.see-all-container) {
                    position: relative;

                    &:before {
                        content: close-quote;
                        display: block;
                        position: absolute;
                        width: 16px;
                        height: 100%;
                        top: 0;
                        left: -64px;
                        background-color: var(--header-accent-color, var(--secondary-color));
                        transition: all .25s linear;

                        /* Layer 1: vertical gradient fade (top & bottom transparent) */
                        /* Layer 2: original bar mask */
                        -webkit-mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");
                        mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");

                        -webkit-mask-repeat: no-repeat, repeat-y;
                        mask-repeat: no-repeat, repeat-y;

                        -webkit-mask-size: 100% 100%, var(--link-size);
                        mask-size: 100% 100%, var(--link-size);

                        -webkit-mask-position: center, center;
                        mask-position: center, center;

                        /* Composite mode so gradient and stripes intersect */
                        -webkit-mask-composite: source-in;
                        /* Chrome/Safari */
                        mask-composite: intersect;
                        /* Firefox */
                    }

                    div:has(>.see-all-container) {
                        &:before {
                            display: none;
                        }
                    }
                }
            }

            .last.one-third {
                padding-left: 66px;
                box-sizing: border-box;

                div:has(>.see-all-container) {
                    position: relative;

                    &:before {
                        content: close-quote;
                        display: block;
                        position: absolute;
                        width: 16px;
                        height: 100%;
                        top: 0;
                        left: -64px;
                        background-color: var(--header-accent-color, var(--secondary-color));
                        transition: all .25s linear;

                        /* Layer 1: vertical gradient fade (top & bottom transparent) */
                        /* Layer 2: original bar mask */
                        -webkit-mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");
                        mask-image:
                            linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%),
                            url("data:image/svg+xml,%3Csvg viewBox='0 0 16 1042' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='4.39761e-08' x2='7.99995' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='15' y1='4.39761e-08' x2='14.9999' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3Cline x1='1' y1='4.39761e-08' x2='0.999949' y2='1156' stroke='%23DC4405' stroke-width='2' /%3E%3C/svg>");

                        -webkit-mask-repeat: no-repeat, repeat-y;
                        mask-repeat: no-repeat, repeat-y;

                        -webkit-mask-size: 100% 100%, var(--link-size);
                        mask-size: 100% 100%, var(--link-size);

                        -webkit-mask-position: center, center;
                        mask-position: center, center;

                        /* Composite mode so gradient and stripes intersect */
                        -webkit-mask-composite: source-in;
                        /* Chrome/Safari */
                        mask-composite: intersect;
                        /* Firefox */
                    }

                    div:has(>.see-all-container) {
                        &:before {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}