:root {
    /**/
    /*One-Column Container*/
    /*
    
    */

    /*Two-Column Container*/
    /*
    
    */
    /*Three-Column Container*/
    /*
    
    */   
    --grid-template-areas-small-screen-3:  "main" "left" "right";
    --grid-template-rows-small-screen-3: auto auto auto;
    --grid-template-areas-large-screen-3:  "left main right";
    --grid-template-columns-large-screen-3: 1fr 3fr 1fr;
    --grid-template-areas-small-screen-2l:  "main" "left";
    --grid-template-rows-small-screen-2l: auto auto;
    --grid-template-areas-large-screen-2l:  "left main";
    --grid-template-columns-large-screen-2l: 1fr 4fr;
    --grid-template-areas-small-screen-2r:  "main" "right";
    --grid-template-rows-small-screen-2r: auto auto;
    --grid-template-areas-large-screen-2r:  "main right";
    --grid-template-columns-large-screen-2r: 2fr 1fr;
    --grid-template-areas-small-screen-1:  "main";
    --grid-template-rows-small-screen-1: 1fr;
    --grid-template-areas-large-screen-1:  "main";
    --grid-template-columns-large-screen-1: 1fr;
    --grid-template-rows-large-screen: 1fr;
    --container-gap: 20px;
    --container-padding: 1.5rem;
    --container-width-small-screen: 100%;
    --container-width-large-screen: 90%;
    --container-border: 0;

    --divider-line-on: none;/* use none for off and "" for on*/
    --divider-line-color: #444444;
    --divider-line-width: 3px;
    --divider-line-dash-length: 5px;
    --divider-line-dash-gap: 5px;

    --left-content-background-color: #ffffff;
    --left-content-border-width: 0px;
    --left-content-border-style: solid;
    --left-content-border-color: none;

    --main-content-background-color: #ffffff;
    --main-content-border-width: 0px;
    --main-content-border-style: solid;
    --main-content-border-color: green;

    --right-content-background-color: #ffffff;
    --right-content-border-width: 0px;
    --right-content-border-style: solid;
    --right-content-border-color: yellow;

}
.container {
    border: var(--container-border);
    width: var(--container-width-small-screen);
    display: grid;
    row-gap: var(--container-gap);
    column-gap: none;
    padding: var(--container-padding);
    grid-template-columns: none;
}

.height-full {
    min-height: 100%;
}

.height-fit {
    min-height: fit-content;
}
.container.one-col {
    grid-template-areas: var(--grid-template-areas-small-screen-1);
    grid-template-rows: var(--grid-template-rows-small-screen-1);
}
.container.two-col-left {
    grid-template-areas: var(--grid-template-areas-small-screen-2l);
    grid-template-rows: var(--grid-template-rows-small-screen-2l);
}
.container.two-col-right {
    grid-template-areas: var(--grid-template-areas-small-screen-2r);
    grid-template-rows: var(--grid-template-rows-small-screen-2r);
}
.container.three-col {
    grid-template-areas: var(--grid-template-areas-small-screen-3);
    grid-template-rows: var(--grid-template-rows-small-screen-3);
}
.content-left {
    border: var(--left-content-border-width) var(--left-content-border-style) var(--left-content-border-color);
    background-color: var(--left-content-background-color);
    height:100%;
    grid-area: left;
    position: relative;
    padding: var(--standard-padding-small-screen);
}

.content-left:after {
    content: var(--divider-line-on);
    position: absolute;
    bottom: calc(((var(--container-gap) / 2) + var(--divider-line-width) + (var(--left-content-border-width) / 2)) * -1) ;     /* position at the bottom */
    left: 0;       /* position from the left side */
    height: var(--divider-line-width);   /* This will be the height of the dashed line */
    width: 100%;   /* Make the line span the entire width of the parent */
    background: repeating-linear-gradient(
        to right,
        var(--divider-line-color) 0px,
        var(--divider-line-color) var(--divider-line-dash-length),        /* Dash width */
        transparent var(--divider-line-dash-length),
        transparent calc(var(--divider-line-dash-length) + var(--divider-line-dash-gap))  /* Gap width */
    );
}


.content-main {
    border: var(--main-content-border-width) var(--main-content-border-style) var(--main-content-border-color);
    background-color: var(--main-content-background-color);
    height:100%;
    grid-area: main;
    position: relative;
    padding: var(--standard-padding-small-screen);
}


.content-main:after {
    content: var(--divider-line-on);
    position: absolute;
    bottom: calc(((var(--container-gap) / 2) + var(--divider-line-width) + (var(--left-content-border-width) / 2)) * -1) ;     /* position at the bottom */
    left: 0;       /* position from the left side */
    height: var(--divider-line-width);   /* This will be the height of the dashed line */
    width: 100%;   /* Make the line span the entire width of the parent */
    background: repeating-linear-gradient(
        to right,
        var(--divider-line-color) 0px,
        var(--divider-line-color) var(--divider-line-dash-length),        /* Dash width */
        transparent var(--divider-line-dash-length),
        transparent calc(var(--divider-line-dash-length) + var(--divider-line-dash-gap))  /* Gap width */
    );
}
.content-right {
    border: var(--right-content-border-width) var(--right-content-border-style) var(--right-content-border-color);
    background-color: var(--right-content-background-color);
    height:fit-content;
    grid-area: right;
    position: relative;
    padding: var(--standard-padding-small-screen);
}

@media (min-width: 800px) {
    .container {
        width: var(--container-width-large-screen);
        row-gap: none;
        column-gap: var(--container-gap);
    }
    .container.one-col {
        grid-template-areas: var(--grid-template-areas-large-screen-1);
        grid-template-columns: var(--grid-template-columns-large-screen-1);
        grid-template-rows: var(--grid-template-rows-large-screen-1);
    }
    .container.two-col-left {
        grid-template-areas: var(--grid-template-areas-large-screen-2l);
        grid-template-columns: var(--grid-template-columns-large-screen-2l);
        grid-template-rows: var(--grid-template-rows-large-screen-2l);
    }
    .container.two-col-right {
        grid-template-areas: var(--grid-template-areas-large-screen-2r);
        grid-template-columns: var(--grid-template-columns-large-screen-2r);
        grid-template-rows: var(--grid-template-rows-large-screen-2r);
    }
    .container.three-col {
        grid-template-areas: var(--grid-template-areas-large-screen-3);
        grid-template-columns: var(--grid-template-columns-large-screen-3);
        grid-template-rows: var(--grid-template-rows-large-screen-3);
    }

    .content-left {
        padding: var(--standard-padding-large-screen);
    }

    .content-left:after {
        content:var(--divider-line-on);
        position:absolute;
        top:0;
        right:calc(((var(--container-gap) / 2) + var(--divider-line-width) + (var(--left-content-border-width) / 2)) * -1);
        left: unset;
        bottom: unset;
        height:100%;
        width: var(--divider-line-width);
        /*background:pink;*/
        background: repeating-linear-gradient(
        to bottom,
        var(--divider-line-color) 0px,
        var(--divider-line-color) var(--divider-line-dash-length),       /* Dash height */
        transparent var(--divider-line-dash-length),
        transparent calc(var(--divider-line-dash-length) + var(--divider-line-dash-gap))  /* Gap height */)
    }

    .content-main {
        padding: var(--standard-padding-large-screen);
    }

    .content-main:after {
        content:var(--divider-line-on);
        position:absolute;
        top:0;
        right:calc(((var(--container-gap) / 2) + var(--divider-line-width) + (var(--left-content-border-width) / 2)) * -1) ;
        left: unset;
        bottom: unset;
        height:100%;
        width: var(--divider-line-width);
        background: repeating-linear-gradient(
        to bottom,
        var(--divider-line-color) 0px,
        var(--divider-line-color) var(--divider-line-dash-length),       /* Dash height */
        transparent var(--divider-line-dash-length),
        transparent calc(var(--divider-line-dash-length) + var(--divider-line-dash-gap))  /* Gap height */)
    }

    .content-right {
        padding: var(--standard-padding-large-screen);
    }
    
}