main {
    min-height: 50vh;
    position: relative;

    .main-container {
        padding: 0;
    }

    article {
        position: relative;
        height: 100%;
    }

    .region-content {
        padding: 0;
        height: 100%;
    }

    #block-seeaseizure-bootstrap-content {
        height: 100%;
    }

    .main-line-svg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        z-index: 1;
        overflow: visible;
        opacity: 1;
        transform: scaleX(1) scaleY(1);

        path {
            vector-effect: non-scaling-stroke;
            stroke: var(--navy-60);
            stroke-width: 1;
            fill: none;
        }
    }

    .main-container {
        position: relative;

        .article-left-line-svg,
        .article-right-line-svg {
            display: none;
        }

        @media (min-width: 992px) {
            .article-left-line-svg {
                display: block;
                position: fixed;
                top: 0;
                left: calc((var(--viewport-width, 100vw) - 821px) / 2);
                width: 1px;
                height: 100%;
                z-index: 5;
                overflow: visible;
                pointer-events: none;
                opacity: 1;
                transform: scaleX(1) scaleY(1);
                transform-origin: top center;

                path {
                    vector-effect: non-scaling-stroke;
                    stroke: var(--navy-60);
                    stroke-width: 1;
                    fill: none;
                }
            }

            .article-right-line-svg {
                display: block;
                position: fixed;
                bottom: 0;
                right: calc((var(--viewport-width, 100vw) - 821px) / 2);
                width: 1px;
                height: 100%;
                z-index: 5;
                overflow: visible;
                pointer-events: none;
                opacity: 1;
                transform: scaleX(1) scaleY(1);
                transform-origin: bottom center;

                path {
                    vector-effect: non-scaling-stroke;
                    stroke: var(--navy-60);
                    stroke-width: 1;
                    fill: none;
                }
            }

        }

        @media (min-width: 1200px) {
            .article-left-line-svg {
            left: calc((var(--viewport-width, 100vw) - 821px) / 2);
            }
            .article-right-line-svg {
            right: calc((var(--viewport-width, 100vw) - 821px) / 2);
            }
        }

        @media (min-width: 1400px) {
            .article-left-line-svg {
            left: calc((var(--viewport-width, 100vw) - 1077px) / 2);
            }
            .article-right-line-svg {
            right: calc((var(--viewport-width, 100vw) - 1077px) / 2);
            }
        }

        /* Corner images on seizure pages */
        @media (min-width: 992px) {
            &:has(.seizure-type-carousel),
            &:has(.seizure-summary-page),
            .page-node-6 &,
            .page-node-11 &,
            .page-node-16 &,
            .page-node-21 & {
                &::before {
                    content: "";
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    width: 100%;
                    height: 100%;
                    background-image: url('/themes/custom/seeaseizure_bootstrap/images/icons/top-left.svg');
                    background-repeat: no-repeat;
                    background-position: top left;
                    background-size: auto;
                    z-index: 15;
                    pointer-events: none;
                    visibility: visible;
                }

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -2px;
                    right: -2px;
                    width: 100%;
                    height: 100%;
                    background-image: url('/themes/custom/seeaseizure_bootstrap/images/icons/bottom-right.svg');
                    background-repeat: no-repeat;
                    background-position: bottom right;
                    background-size: auto;
                    z-index: 15;
                    pointer-events: none;
                    visibility: visible;
                }
            }

            /* Corner image on choose a seizure type page (node-36) */
            .page-node-36 & {
                &::after {
                    content: "";
                    position: absolute;
                    bottom: -2px;
                    right: -2px;
                    width: 100%;
                    height: 100%;
                    background-image: url('/themes/custom/seeaseizure_bootstrap/images/icons/bottom-right.svg');
                    background-repeat: no-repeat;
                    background-position: bottom right;
                    background-size: auto;
                    z-index: 15;
                    pointer-events: none;
                    visibility: visible;
                }
            }
        }
    }
}

/* Homepage only: Hide article lines initially for GSAP animation */
@media (min-width: 992px) {
    .path-frontpage main .main-container .article-left-line-svg,
    .path-frontpage main .main-container .article-right-line-svg {
        opacity: 0;
        transform: scaleX(1) scaleY(0);
    }

    .path-frontpage main .main-container .article-left-line-svg {
        transform-origin: top center;
    }

    .path-frontpage main .main-container .article-right-line-svg {
        transform-origin: bottom center;
    }
}