@import "./../../common/modern-reset.css";
@import "./../../common/base.css";

h1 {
    margin-block: 1em;
}

.grid-item1 {
    background-color: yellow;
}

.grid-item2 {
    background-color: lightblue;
}

.grid-item3 {
    background-color: violet;
}

.grid-item4 {
    background-color: greenyellow;
}

.grid-box {
    border: 1px solid greenyellow;
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 50px);
    isolation: isolate;

    .grid-item1 {
        grid-row: 1 / span 2;
        grid-column: 1 / span 2;
        z-index: 1;
    }

    .grid-item2 {
        grid-row: 2 / span 2;
        grid-column: 2 / span 2;
    }

    .grid-item3 {
        position: absolute;
        inset: 2rem;
        z-index: -1;
    }
}

.grid-wrapper {
    border: 1px solid red;
    block-size: 400px;
    display: grid;
    grid-template-columns: repeat(5, 200px);
    grid-template-rows: repeat(5, 50px);
    /* justify-items: center;
    align-items: center; */
    /* place-items: center; */

    /* justify-content: center;
    align-content: center; */
    place-content: center;

    .grid-item2 {
        font-size: 1.5rem;
        /* align-self: center;
        justify-self: center; */
        place-self: center;
    }
}