/* for browsers that don't support css-grid */
.slide-control { display: none }
.slide-label   { font-weight: bold}
.slide         { margin-bottom: 2em}



@supports (display:grid) {
    
    /* reverse the previous */ 
    .slide-label   { font-weight: inherit}
    .slide         { margin-bottom: 0}

    .slides,
    .slides-final {
        display: grid;
        grid-template-rows: 1fr 2em;
        grid-template-columns: repeat(3, 1fr) 3fr;
        grid-row-gap: 1em;
        overflow: hidden;
        border: 1px solid var(--light-gray);
    }
    
    .slides-final {
        grid-template-columns: repeat(5, 1fr);
    }

    .slide-label {
        grid-row: 2 / 3;
        padding-left: 1.2rem;
    }

    .slides-final .slide-label {
        padding-left: 0;
        text-align: center;
    }
    
    .slides-final .slide-label:first-of-type {
        grid-column: 1 / 3;
        text-align: right;
    }
    
    .slides-final .slide-label:last-of-type {
        text-align: left;
    }

    .slide {
        grid-row: 1 / 2;
        grid-column: 1 / 6;
        position: relative;
        left: -100%;
        transition: left .5s;
        padding: 1.2rem;
    }
    
    .slides-final .slide {
        max-height: 30rem;
        overflow-y: auto;
        opacity: 0;
        transition: left .5s, opacity .7s;
    }
    
    .slide-control:checked + .slide-label {
        color: var(--sienna);
    }
    
    .slide-control:checked + .slide-label + .slide {
        left: 0;
    }
    
    .slides-final .slide-control:checked + .slide-label + .slide {
        opacity: 1;
    }
    
    .slide-control:checked ~ .slide {
        left: 100%;
    }
    
}