@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

:root {
    --content-width: 1200px;
    --border-radius: 6px;
    --box-shadow: rgba(197,197,197,0.5) 0px 1px 4px 0px;

    --rem-xs: 0.5rem;
    --rem-s: 1rem;
    --rem-m: 1.25rem;
    --rem-xm: 1.5rem;
    --rem-l: 2rem;
    --rem-xl: 2.5rem;
    --rem-xxl: 3rem;

    --ff-primary: "PT Sans", sans-serif;
    --ff-accent: "PT Sans", sans-serif;

    --fs-small: clamp(var(--rem-xs), 0.5vw, var(--rem-s));
    --fs-normal: clamp(var(--rem-s), 1vw, var(--rem-m));
    --fs-big: clamp(var(--rem-m), 1.25vw, var(--rem-xm));
    --fs-xbig: clamp(var(--rem-m), 1.5vw, var(--rem-l));

    --fw-normal: 400;
    --fw-bold: 700;

    --clr-primary: #3a3a3a;
    --clr-secondary: #6a6a6a;
    --clr-primary-inverted: #fff;
    --clr-accent: #8b0000;
    --clr-accent-light: #d6d6d6;
    --clr-accent-dark: #004f7c;
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    color: var(--clr-primary);
    font-family: var(--ff-primary);
    font-weight: var(--fw-normal);
    font-size: var(--fs-normal);
    line-height: 1.5;
}

body, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

p {
    margin-bottom: var(--rem-s);
}

section {
    margin: 0 var(--rem-l);
    max-height: 100vh;
    scroll-snap-align: start;
}

    section.grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(1px, 1fr));
        gap: var(--rem-s);
    }

.container {
    display: grid;
    gap: var(--rem-l);
    margin: var(--rem-l) 0;
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.fullgrid, .halfgrid {
    display: grid;
    gap: var(--rem-s);
    grid-template-rows: repeat(3, minmax(1px, 1fr));
    height: calc(100vh - 2 * var(--rem-l));
}

    .fullgrid > div, .halfgrid > div {
        overflow-y: scroll;
        padding: var(--rem-s);
        border: 1px #6a6a6a solid;
    }

        .a { grid-area: a; }
        .b { grid-area: b; }
        .c { grid-area: c; }
        .d { grid-area: d; }
        .e { grid-area: e; }
        .f { grid-area: f; }
        .g { grid-area: g; }
        .h { grid-area: h; }
        .i { grid-area: i; }
        .j { grid-area: j; }
        .k { grid-area: k; }
        .l { grid-area: l; }

        .img { 
            background-position: 50%;
            background-size: cover;
            /*border-radius: var(--border-radius);*/
            box-shadow: var(--box-shadow);
            border: none !important;
        }

    .fullgrid {
        grid-template-columns: repeat(4, minmax(1px, 1fr));
    }

        .fg_layout_1 {
            grid-template-areas:
            "a a a a"
            "a a a a"
            "a a a a";
        }

        .fg_layout_2a {
            grid-template-areas:
            "a a a b"
            "a a a b"
            "a a a b";
        }

        .fg_layout_2b {
            grid-template-areas:
            "a b b c"
            "a b b c"
            "a b b c";
        }

        .fg_layout_2c {
            grid-template-areas:
            "a b b b"
            "a b b b"
            "a b b b";
        }

        .fg_layout_2d {
            grid-template-areas:
            "a b b b"
            "c b b b"
            "d b b b";
        }

        .fg_layout_2e {
            grid-template-areas:
            "a b b b"
            "c b b b"
            "c b b b";
        }

        .fg_layout_2f {
            grid-template-areas:
            "a b b b"
            "a b b b"
            "c b b b";
        }

        .fg_layout_2g {
            grid-template-areas:
            "a a a b"
            "a a a c"
            "a a a d";
        }

        .fg_layout_2h {
            grid-template-areas:
            "a a a b"
            "a a a b"
            "a a a c";
        }

        .fg_layout_2i {
            grid-template-areas:
            "a a a b"
            "a a a c"
            "a a a c";
        }

        .fg_layout_3a {
            grid-template-areas:
            "a a a a"
            "a a a a"
            "b b b b";
        }

        .fg_layout_3b {
            grid-template-areas:
            "a a a a"
            "a a a a"
            "b b c c";
        }

        .fg_layout_3c {
            grid-template-areas:
            "a a a a"
            "a a a a"
            "b b c d";
        }

        .fg_layout_3d {
            grid-template-areas:
            "a a a a"
            "a a a a"
            "b c d d";
        }

        .fg_layout_3e {
            grid-template-areas:
            "a a a a"
            "a a a a"
            "b c d e";
        }

        .fg_layout_3f {
            grid-template-areas:
            "a a b b"
            "c c c c"
            "c c c c";
        }

        .fg_layout_4a {
            grid-template-areas:
            "a a a b"
            "a a a b"
            "c d e f";
        }

        .fg_layout_4b {
            grid-template-areas:
            "a b b b"
            "a b b b"
            "c d e f";
        }

        .fg_layout_4c {
            grid-template-areas:
            "a b c d"
            "e f f f"
            "e f f f";
        }

        .fg_layout_4d {
            grid-template-areas:
            "a b c d"
            "e e e f"
            "e e e f";
        }

        .fg_layout_4e {
            grid-template-areas:
            "a a a b"
            "a a a c"
            "d e f g";
        }

        .fg_layout_4f {
            grid-template-areas:
            "a b b b"
            "c b b b"
            "d e f g";
        }

        .fg_layout_4g {
            grid-template-areas:
            "a b c d"
            "e f f f"
            "g f f f";
        }

        .fg_layout_4h {
            grid-template-areas:
            "a b c d"
            "e e e f"
            "e e e g";
        }

    .halfgrid {
        grid-template-columns: repeat(2, minmax(1px, 1fr));
    }

        .hg_layout_1 {
            grid-template-areas:
            "a b"
            "c d"
            "e f";
        }

        .hg_layout_2a {
            grid-template-areas:
            "a a"
            "b c"
            "d e";
        }

        .hg_layout_2b {
            grid-template-areas:
            "a b"
            "c c"
            "d e";
        }

        .hg_layout_2c {
            grid-template-areas:
            "a b"
            "c d"
            "e e";
        }

        .hg_layout_2d {
            grid-template-areas:
            "a a"
            "b b"
            "c c";
        }

        .hg_layout_2e {
            grid-template-areas:
            "a a"
            "a a"
            "b b";
        }

        .hg_layout_2f {
            grid-template-areas:
            "a a"
            "b b"
            "b b";
        }

        .hg_layout_2g {
            grid-template-areas:
            "a a"
            "a a"
            "a a";
        }

        .hg_layout_2h {
            grid-template-areas:
            "a a"
            "b c"
            "d d";
        }

        .hg_layout_2i {
            grid-template-areas:
            "a a"
            "a a"
            "b c";
        }

        .hg_layout_3a {
            grid-template-areas:
            "a b"
            "a c"
            "a d";
        }

        .hg_layout_3b {
            grid-template-areas:
            "a b"
            "a b"
            "a c";
        }

        .hg_layout_3c {
            grid-template-areas:
            "a b"
            "a c"
            "a c";
        }

        .hg_layout_3d {
            grid-template-areas:
            "a b"
            "c b"
            "d b";
        }

        .hg_layout_3e {
            grid-template-areas:
            "a b"
            "a b"
            "c b";
        }

        .hg_layout_3f {
            grid-template-areas:
            "a b"
            "c b"
            "c b";
        }

        .hg_layout_3g {
            grid-template-areas:
            "a a"
            "b c"
            "b c";
        }

        .hg_layout_3h {
            grid-template-areas:
            "a b"
            "a b"
            "c c";
        }

        .hg_layout_4a {
            grid-template-areas:
            "a b"
            "a c"
            "d c";
        }

        .hg_layout_4b {
            grid-template-areas:
            "a b"
            "c b"
            "c d";
        }

        
    
    /*.layout_1 {
        grid-template-areas:
            "a b c d"
            "e f g h"
            "i j k l";
    }*/

    .layout_2 {
        grid-template-areas:
            "a a b c"
            "d e f g"
            "h i j k";
    }

    .layout_3 {
        grid-template-areas:
            "a a b c"
            "d e f g"
            "h i j k";
    }

    /*.layout_1 {
        grid-template-areas:
            "a a a a"
            "a a a a"
            "a a a a";
    }*/

    .layout_2 {
        grid-template-areas:
            "a a b b"
            "a a b b"
            "a a b b";
    }

    .layout_3a {
        grid-template-areas:
            "a a b b"
            "a a b b"
            "a a c c";
    }

        .layout_3b {
            grid-template-areas:
                "a a b b"
                "a a b b"
                "c c b b";
        }

    .layout_4 {
        grid-template-areas:
            "a a b b"
            "a a c c"
            "a a c c";
    }

    .layout_5 {
        grid-template-areas:
            "a a b b"
            "a a c c"
            "a a d d";
    }

    .layout_6 {
        grid-template-areas:
            "a a b b"
            "a a c c"
            "a a d d";
    }

    .layout_7 {
        grid-template-areas:
            "a a b b"
            "c c d d"
            "e e f f";
    }

    .layout_8 {
        grid-template-areas:
            "a b c d"
            "e f g h"
            "i j k l";
    }

    .layout_5 {
        grid-template-areas:
            "a b b b"
            "c b b b"
            "d e f g";
    }