index-shop/assets/css/template/support/_layout.scss

[data-template="support"]{

    section{
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding-bottom: calc(var(--spacing)*0.75);
        margin-bottom: calc(var(--spacing)*0.75);
        border-bottom: var(--border-light);
    }

    #section__hero{
        margin-top: calc(var(--spacing)*1);
        display: block;
    }

    #section__questions{
        border-bottom: none;
    }

    #section__donation:target{
        padding-top: calc(var(--header-h)*1.25);
    }

    #section__video{
        display: flex;
        flex-direction: column;
        align-items: center;

        .video-container{
            display: flex;
        } 
        video{
            width: 100%;
            border: 1px solid var(--grey-800);
            max-height: 90vh;
            display: flex;
        }
    }


    @media #{$medium-up}{

        main{
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: repeat(4, auto);
            max-width: 1200px;
            margin: 0 auto;
            padding-bottom: 0;
        }

        #section__donation{
            padding-top: calc(var(--spacing)*1);
        }

        #section__donation,
        #section__comments{
            border: none;
        }

        #section__baseline{
            padding: calc(var(--spacing)*0.5) 0;
        }

        .gauge__container{
            padding-top: calc(var(--spacing)*1);
        }

        .col-left,
        .col-right{
            padding-top: calc(var(--spacing)*1);
        }
        .col-left{
            grid-column: 1;
            grid-row: 1/5;
        }
        .col-right{
            position: sticky;
            top: calc(var(--spacing)*2.5);
            grid-column: 2;
            grid-row: 1;
            overflow: hidden;
        }

    }


    @media #{$medium}{
        main{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: stretch;  
            max-width: 600px;
            margin: 0 auto;
        }

        section{
            width: 100%;
        }
        

        .col-left,
        .col-right{
            display: contents;
        }

        #section__hero{
            order: 1;  
        }
        #section__donation{
            order: 2;  
        }
        #section__baseline{
            order: 3;  
        }
        #section__video{
            order: 4;  
        }
        #section__comments{
            order: 5;  
        }
        #section__questions{
            order: 6;  
       
        }

    }


    @media #{$paysage}{
        .col-left,
        .col-right{
            display: contents;
        }

        section{
            width: 100%;
        }

        #section__donation{
            grid-row: 1; 
            grid-column: 2; 
            position: sticky;
            top: calc(var(--spacing)*3.75);
        }
        
        #section__hero{
            grid-row: 1; 
            grid-column: 1;
        }
        #section__baseline{
            grid-row: 2; 
            grid-column: 1;
        }
        #section__video{
            grid-row: 3; 
            grid-column: 1;
        }
        #section__comments{
            grid-row: 4; 
            grid-column: 1; 
            border-bottom: var(--border-light);

        }
        #section__questions{
            grid-row: 5; 
            grid-column: 1;
        }

    }



}