.gameSection {
    width: 100%;
    background-size: cover;
}
.parent {
    position: relative;
    margin: auto;
    color: #fff;
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.parent div {
    position: relative; /* avoids text overflow */
}

.div2 img,
.div3 img,
.div4 img,
.div5 img,
.div6 img {
    border-radius: 5px;
    display: block;
    width: 100%;
}

.div3 img,
.div4 img,
.div5 img,
.div6 img {
    position: relative;
    top: 3px;
}

p, li {
    line-height: 140%;
}

/* Desktop */
@media screen and (min-width: 801px) {

    .gameSection {
        padding: 20vh 0;
    }

    h1 {
        font-size: 2.9em;
    }

    .parent {
        width: 85%;
        max-width: 1400px;
        padding: 20px;
        text-align: left;
        border-radius: 20px;
    }

    .parent {
        display: grid;
        grid-template-columns: 3fr repeat(2, 1fr);
        grid-template-rows: 2fr repeat(2, 1fr);
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        min-height: fit-content;
    }
    .div1 { grid-area: 1 / 1 / 4 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 4; white-space: nowrap; }
    .div3 { grid-area: 2 / 2 / 3 / 3; }
    .div4 { grid-area: 2 / 3 / 3 / 4; }
    .div5 { grid-area: 3 / 2 / 4 / 3; }
    .div6 { grid-area: 3 / 3 / 4 / 4; }

    .div1 {
        margin: 15% 7% 0 7%;
        font-size: 1.1em;
    }
}

/* Mobile */
@media (max-device-width: 568px), (max-width: 800px) {

    .gameSection {
        padding-top: 20px;
    }

    h1 {
        font-size: 2.2em;
    }
    .parent {
        width: 90%;
        padding: 5vh 5%;
        text-align: center;
    }

    .div1 ul {
        list-style-position: inside;
        margin: auto;
        padding-inline-start: 0;
        width: 70%;
    }
    .div1 li {
        margin: 15px 0;
    }

    .parent {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 5.8fr 2fr repeat(2, 1fr); /* increase 6.5fr (first value) when images drift away */
        grid-column-gap: 16px;
        grid-row-gap: 16px;
    }
    .div1 { grid-area: 1 / 1 / 2 / 3; }
    .div2 { grid-area: 2 / 1 / 3 / 3; }
    .div3 { grid-area: 3 / 1 / 4 / 2; }
    .div4 { grid-area: 3 / 2 / 4 / 3; }
    .div5 { grid-area: 4 / 1 / 5 / 2; }
    .div6 { grid-area: 4 / 2 / 5 / 3; }
}