:root {
    --godsila-red: #D91F26;
    --godsila-blue: #1D3564;
    --godsila-black: #000000;
    --godsila-gray: #4D4D4D;
    --godsila-white: #FFFFFF;
    --nav-bar-height: 5rem;
    --nav-bar-height-big: 15rem;
    --nav-bar-height-for-static: 5rem;

}


@media screen and (max-width: 900px) {
    :root {
        --nav-bar-height: 3.5rem;
        --nav-bar-height-for-static: 3.5rem;
    }
}

[class*="col-"] {
    float: left;
    padding-left: 12px;
    padding-right: 12px;
}


a {
    text-decoration: none;
}

a:hover {
    text-decoration: none !important
}

p {
    margin: 0;
    padding: 0;
}

.gridsystem {
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    column-gap: 1.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.gridsystem#about-blue {
    grid-template-columns: repeat(3, 1fr) [start-content] repeat(6, 1fr) [end-content] repeat(3, 1fr);
}

.gridsystem#about-red {
    grid-template-columns: repeat(1, 1fr) [start-content] repeat(10, 1fr) [end-content] repeat(1, 1fr);
}


@media screen and (max-width: 900px) {
    .gridsystem {
        grid-template-columns: repeat(4, 1fr);
        display: grid;
        column-gap: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .gridsystem#about-blue {
        grid-template-columns: [start-content] repeat(4, 1fr) [end-content];
    }

    .gridsystem#about-red {
        grid-template-columns: [start-content] repeat(4, 1fr) [end-content];
    }

}