/*
1390px ve 1730px container-lg olmas� i�indir.
*/

:root {
    --container-lg-width: 85%;
    --grid-mid-width: 1fr;
}

@media (max-width: 768px) {
    :root {
        --grid-mid-width: var(--container-lg-width);
    }
}

.grid-container {
    display: grid;
    grid-template-columns: [left-start] calc((100% - var(--container-lg-width)) / 2) [mid-start right-start] var(--grid-mid-width) [left-end mid-end] calc((100% - var(--container-lg-width)) / 2) [right-end];
}

    .grid-container .grid-full {
        grid-column: full;
    }

    .grid-container .grid-mid {
        grid-column: mid;
    }

    .grid-container .grid-right {
        grid-column: right;
    }

    .grid-container .grid-left {
        grid-column: left;
    }

@media (max-width:768px) {

    .grid-container.middle {
        display: block;
        margin: auto;
        width: var(--container-lg-width);
    }

    .grid-container .grid-right {
        grid-column: mid;
    }
}