/*Same as 2col*/

.grid-container {
    display: grid;
    gap: 0;

    grid-template-columns: 1fr 300px;
    grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
}

.header {
    grid-area: header;
}

.footer {
    grid-area: footer;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
    padding: 10px;

    /*Make sure words are always fitting into the area (especially long links)*/
    /*min-width: 0;*/
    overflow-wrap: anywhere;
}

@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-rows: repeat(3, auto);
        grid-template-columns: 100%;
        grid-template-areas:
    "header"
    "content"
    "footer";
    }

    .sidebar {
        display: none;
    }

}

.subheader {
    font-size: smaller;
    font-style: italic;
    color: gray;
}

.striped-rectangle {
    padding: 15px;
    position: relative;
    background: url('/images/bg.gif');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*This still requires four corner elements <img src="/images/cross.png" class="cross-**" alt="">*/
}