html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    font-optical-sizing: auto;
    overflow-x: hidden;
    color: var(--gl-color);
    background-color: var(--gl-bg);
    font-family: "Open Sans", sans-serif;
}

.gl-container {
    display: grid;
    grid-template-rows: repeat(10, auto);
    grid-template-columns: 32px 1fr 32px;
}

/* sm */
@media (min-width: 640px) {
    .gl-container {
        grid-template-columns: 1fr 8fr 1fr;
    }
}

/* md */
@media (min-width: 768px) {
    .gl-container {
        grid-template-columns: 2fr 8fr 2fr;
    }
}

/* lg */
@media (min-width: 1024px) {
    .gl-container {
        grid-template-columns: 2fr 10fr 2fr;
    }
}

/* xl */
@media (min-width: 1280px) {
    .gl-container {
        grid-template-columns: 2fr 7fr 2fr;
    }
}

/* 2xl */
@media (min-width: 1536px) {

}

/* 3xl */
@media (min-width: 1800px) {
    .gl-container {
        grid-template-columns: 3fr 8fr 3fr;
    }
}

/* 4xl */
@media (min-width: 2200px) {
    .gl-container {
        grid-template-columns: 3fr 8fr 3fr;
    }
}