.hero-test {
    display: grid;
    grid-template-columns: minmax(var(--space-section-x), 1fr) repeat(12, minmax(10px, 100px)) minmax(var(--space-section-x), 1fr);
    grid-template-rows: 120px auto;
    background-color: var(--c-primary);
    overflow: hidden;
    height: 540px;
}
.hero-test-img-bgr {
    height: 100%;
    overflow: hidden;
    grid-area: 1 / 5 / 3 / 15;
    align-self: end;
    display: flex;
    justify-content: end;
    align-items: end;
    img {
        width: auto;
        height: 100%;
        aspect-ratio: 580/523;
        margin-left: 100px;
        filter: drop-shadow(-100px 10px 10px rgba(0, 0, 0, .25));
    }
}
.hero-test-text {
    grid-area: 2 / 2 / 3 / 10;
    z-index: 1;
    position: relative;
    align-self: center;
    padding-bottom: var(--space-section-y);
}

.hero-test-text a {
    color: var(--c-text-s);
}
.hero-test-text p {
    align-self: end;
    justify-content: end;
    margin-top: var(--space-text-y);
    font-size: var(--fs-l);
    color: var(--c-secondary);
    line-height: 1.1;
    font-weight: 500;
}
.stripes {
    grid-area: 1 / 1 / 3 / 10;
    height: 100%;
    width: 100%;
    background: url('img/background.svg') repeat;
}
.hero-test .bigtext {
    grid-area: 1 / 2 / 3 / 15;
    /* background: url(img/b-test-hero-text.svg) no-repeat 0 100%; */
    font-size: 550px;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: end;
    color: #C14F22;
    vertical-align: baseline;
    overflow: hidden;
    /* transform: translateY(120px); */
    height: 120%;
    pointer-events: none;
    /* padding-top:150px; */
}
@media (max-width: 1024px) {
    .hero-test-img-bgr {
        grid-area: 1 / 1 / 3 / 15;
        transform: translateX(50px);
        img{
            max-height:85%
        }
    }
}
@media (max-width: 600px) {
    .marquee {
        display: none;
    }
    .hero-test {
        height: auto;
    }
    .hero-test-text {
        grid-area: 2 / 2 / 3 / 14;
    }
    .hero-test-img-bgr {
        display: none;
    }
    .stripes {
        grid-area: 1 / 1 / 4 / 10;
    }
}





.four-way-split{
    background-color: #404040;
    position: relative;
    display: grid;
    grid-template-columns: minmax(var(--space-section-x), 1fr) repeat(12, minmax(10px, 100px)) minmax(var(--space-section-x), 1fr);
}
.four-way-split-layout {
    
    display: flex;
    align-items: center;
    justify-content:end;
    grid-column: 2 / 14;
    justify-self:end;
    padding:calc(var(--space-text-y) * 3) 0;
    color:white;
    gap:5em;
    ul {
        width: 100%;
        display: flex;
        list-style: none;
        text-align: center;
    }

    ul li{
        width: 25%;
        position: relative;
        padding: 0 var(--space-text-x);
        &:last-child{
            padding-right:0;
        }
        &:first-child{
            padding-left:0;
        }
        &:not(:last-child):after{
            position: absolute;
            top:25%;
            right:-1px;
            content: " ";
            width:2px;
            height:50%;
            background-color: var(--c-primary);
        }
    }
    
}
.four-way-split:before {
    grid-area: 1 / 1 / 1 / 15;
    content: ' ';
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    background: url('img/section-marker-primary.svg') no-repeat center 0;
    background-size: var(--spacer-size);
    pointer-events: none;
}

@media (max-width: 1024px) {
    /* .instructions-download{
    padding-right:var(--space-section-x);
    } */
}

.b-post-section {
    background-color: #F2F2F2;
    padding: var(--space-section-y) var(--space-section-x) var(--space-section-y);
    position: relative;
    --bgr-variant:url('img/section-marker-lightgrey.svg');

    --var-media-size:300px;
}


.b-post-section-layout{
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1lh auto;
    column-gap: var(--grid-gap);
    
}
.b-post-section-text h2{
    margin-bottom: var(--space-text-y);
} 

.b-post-section-text p{
    columns: 2;
}

.b-post-section-media{ 
    width:var(--var-media-size);
    height:var(--var-media-size);
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: end;
}

.b-post-section-media img{
    width:100%;
}

.b-post-section-layout a{
    grid-column: 2 / 2;
    justify-self: end;
}



@media (max-width: 1024px) {
   .b-post-section {
        --var-media-size:250px;
   }
   .b-post-section-text p{
        columns: 1;
    }
}


@media (max-width: 600px) {
    .b-post-section-layout{
        grid-template-columns: auto 2fr;
         grid-template-rows: auto auto auto;
    }
   .b-post-section {
        --var-media-size:100px;
   }
   
    .b-post-section-media{
        grid-row:1 /1;
        grid-column: 1 / 1;
    }
    .b-post-section-text{
        display:contents;
    }

     .b-post-section-text h2{
        grid-row:1 /1;
        grid-column: 2 / 2;
        align-self: center;

     }
     .b-post-section-text p{
        columns: 1;
        grid-column:1 /3;
        margin-top:var(--space-text-y);
    }
    .b-post-section-layout a {
        grid-column:1 /3;
         margin-top:var(--space-text-y);
        justify-self: start;
    }
}

.b-post-section:nth-child(even) {
    background-color: #E6E6E6;
    --bgr-variant:url('img/section-marker-lightgrey2.svg');
}

.b-post-section:after {
    content: ' ';
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 10;
    bottom: -40px;
    left: 0;
    background: var(--bgr-variant) no-repeat center 0;
    background-size: var(--spacer-size);
}

/*

margin-top: var(--editorial-gap);
var(--spacer-size);
var(--grid-gap);
}

*/

.b-post-section{
    .expander {
        grid-column: 1 / 3;
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        will-change: grid-template-rows;
        transition: grid-template-rows .5s;
        position: relative;
    }
    .expander-content {
        will-change: visibility;
        min-height: 0;
        transition: visibility .5s;
        visibility: hidden;
    }
    .expander.is_expanded {
        grid-template-rows: 1fr;
          transition: grid-template-rows .75s;
    }
    .expander.is_expanded .expander-content {
        visibility: visible;
    }
    h4.glow-border{
        display: inline-block;
        --glow-color:var(--c-primary);
        padding: .25em .5em;
        /* transform: translateX(-.5em); */
        margin-top: var(--space-text-y);

    }
}
.data-sheet{
    margin-top: var(--editorial-gap);
    padding-top: var(--editorial-gap);
}
.data-sheet-header{
    position: relative;
}

@media (max-width: 1024px) {
.data-sheet-header h3,
.data-sheet-header h4{
    max-width:calc(100% - 100px)
}
}
.comparison-table{
    margin-top: var(--editorial-gap);
    
    --ct-head-height:4rem;
    --ct-head-padding-y:2rem;
    --ct-head-padding-x:2rem;
    --ct-body-padding-y:2rem;
    --ct-body-padding-x:2rem;
    border-collapse: collapse;
    
    thead tr th{
        font-weight:bold;
        min-height:var(--ct-head-height);
        padding:var(--ct-head-padding-y) var(--ct-head-padding-x);
        font-size: 1.2em;
    }
    tbody tr td{
        min-height:var(--ct-head-height);
        padding:var(--ct-head-padding-y) var(--ct-head-padding-x);
        border:0;
    }
    tbody tr:nth-child(odd) td{      
        background:#E6E6E6;
    }
    tbody tr:nth-child(even) td{      
        background:#F2F2F2;
    }

    tr th:nth-child(3n),
    tr td:nth-child(3n){      
        color:var(--c-primary)
    }
}
.close-btn{
    position: absolute;
    right:100px;
    text-decoration: none;
    color:var(--c-gray);
    top:5px;
    right:calc(40px + var(--space-text-x));
}
.close-btn:after {
       content: ' ';
    display: block;
    width: 30px;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 0px;
    background: url(img/expand-icon-primary.svg) no-repeat 100%;
    background-size: 25px;
}


@media (max-width: 1024px) {
    .comparison-table{
    --ct-head-height:4rem;
    --ct-head-padding-y:1rem;
    --ct-head-padding-x:1rem;
    --ct-body-padding-y:1rem;
    --ct-body-padding-x:1rem;
    }
}

@media (max-width: 600px) {
    .comparison-table{
    --ct-head-height:4rem;
    --ct-head-padding-y:.5rem;
    --ct-head-padding-x:.5rem;
    --ct-body-padding-y:.5rem;
    --ct-body-padding-x:.5rem;
    }

    tr th:nth-child(2n),
    tr td:nth-child(2n){      
        display: none;
    }
}

.summary{
    font-weight: 200;
}