/* GRID */
/* Base Settings */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

:root {
    --grid_space_left: 0fr;
    --grid_space_content: 1fr;
    --grid_space_advertising: 0fr;
    --grid_space_right: 0fr;
}

@media (min-width: 542px) {
    :root {
        --grid_space_left: 1fr;
        --grid_space_content: 540px;
        --grid_space_advertising: 0fr;
        --grid_space_right: 1fr;
    }
}

/* Tablet */
@media (min-width: 712px) {
    :root {
        --grid_space_left: 0fr;
        --grid_space_content: 1fr;
        --grid_space_advertising: 0fr;
        --grid_space_right: 0fr;
    }
}

@media (min-width: 833px) {
    :root {
        --grid_space_left: 1fr;
        --grid_space_content: 832px;
        --grid_space_advertising: 0fr;
        --grid_space_right: 1fr;
    }
}

@media (min-width: 1024px) {
    :root {
        --grid_space_left: 0fr;
        --grid_space_content: 1fr;
        --grid_space_advertising: 0fr;
        --grid_space_right: 0fr;
    }
}

/* Laptop */
@media (min-width: 1073px) {
    :root {
        --grid_space_left: 1fr;
        --grid_space_content: 1072px;
        --grid_space_advertising: 0fr;
        --grid_space_right: 1fr;
    }
}

@media (min-width: 1222px) {
    :root {
        --grid_space_left: 0fr;
        --grid_space_content: 1072px;
        --grid_space_advertising: 300px;
        --grid_space_right: 0fr;
    }
}

@media (min-width: 1373px) {
    :root {
        --grid_space_left: 1fr;
        --grid_space_content: 1072px;
        --grid_space_advertising: 300px;
        --grid_space_right: 1fr;
    }
}

/* Desktop */
@media (min-width: 1680px) {
    :root {
        --grid_space_left: 0fr;
        --grid_space_content: 1fr;
        --grid_space_advertising: 300px;
        --grid_space_right: 0fr;
    }
}

@media (min-width: 1721px) {
    :root {
        --grid_space_left: 1fr;
        --grid_space_content: 1420px;
        --grid_space_advertising: 300px;
        --grid_space_right: 0fr;
    }
}

@media (min-width: 1820px) {
    :root {
        --grid_space_left: 1fr;
        --grid_space_content: 1420px;
        --grid_space_advertising: 3fr;
        --grid_space_right: 0fr;
    }
}

/* Usage */
/* Mobile and Tablet */
.grid {
    display: grid;
    align-content: flex-start;
    grid-template-columns: var(--grid_space_left) var(--grid_space_content) var(--grid_space_advertising) var(--grid_space_right);
    grid-template-rows: auto;
}


/* Container Settings */
/* Mobile */
:root {
    --gutter: 20px;
    --columns: 2;
}

/* Tablet */
@media (min-width: 712px) {
    :root {
        --gutter: 24px;
        --columns: 8;
    }
}

/* Laptop */
@media (min-width: 1073px) {
    :root {
        --gutter: 28px;
        --columns: 12;
    }
}

/* Desktop */
@media (min-width: 1680px) {
    :root {
        --gutter: 28px;
        --columns: 12;
    }
}

.grid__content {
    grid-column: 2/3;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  	column-gap: var(--gutter);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.grid__content-rows {
    column-gap: var(--gutter);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.grid__content-rows div {
    display: none;
    background-color: rgba(255, 0, 0, 0.15);
}

.grid__content-lines {
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
}

.grid__content-lines div {
    border-left: 1px solid rgba(255, 0, 0, 1);
}