.my-grid
    .my-grid__item I
    .my-grid__item III
    .my-grid__item II
    .my-grid__item II
    .my-grid__item I
    .my-grid__item III
    .my-grid__item I

@import url("https://fonts.googleapis.com/css?family=Russo+One&display=swap");

@border-radius: 3rem;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "Russo One", sans-serif;
}

body {
    background: #141414;
}

.my-grid {
    width: 90%;
    max-width: 60rem;
    margin: 2rem auto;
    background: #105e33;
    border-radius: @border-radius;
    box-shadow: 0 0 1rem #000, inset 0 0 2rem #000;

    &__item {
        margin-top: 0.6rem;
        background: #25d172;
        min-height: 10rem;
        line-height: 10rem;
        font-size: 3rem;
        border-radius: @border-radius;
        text-align: center;
        color: #ffffff;
        box-shadow: 0 0 1rem #000;
        transition: all 110ms cubic-bezier(0.79, 0.19, 0.62, 0.96);

        &:nth-of-type(3),
        &:nth-of-type(4) {
            line-height: 10rem;
        }

        &:nth-of-type(1) {
            border-radius: @border-radius @border-radius 0 0;
        }

        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4),
        &:nth-of-type(5),
        &:nth-of-type(6) {
            border-radius: 0;
        }

        &:nth-of-type(7) {
            border-radius: 0 0 @border-radius @border-radius;
        }
        &:hover {
            background: #ffffff;
            color: #25d172;
            cursor: pointer;
        }
    }
}

@media screen and (min-width: 30rem) {
    .my-grid {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 0.6rem;

        &__item {
            margin-top: 0;
            &:nth-of-type(1),
            &:nth-of-type(5),
            &:nth-of-type(7) {
                grid-column: span 2;
            }

            &:nth-of-type(3),
            &:nth-of-type(4) {
                grid-row: span 2;
                line-height: 20rem;
            }

            &:nth-of-type(1) {
                border-radius: @border-radius 0 @border-radius 0;
            }

            &:nth-of-type(2) {
                border-radius: 0 0 @border-radius @border-radius;
            }

            &:nth-of-type(3) {
                border-radius: 0 @border-radius 0 @border-radius;
            }

            &:nth-of-type(4) {
                border-radius: 0 @border-radius 0 @border-radius;
            }

            &:nth-of-type(5) {
                border-radius: @border-radius;
            }

            &:nth-of-type(6) {
                border-radius: @border-radius @border-radius 0 0;
            }

            &:nth-of-type(7) {
                border-radius: @border-radius 0 @border-radius 0;
            }
        }
    }
}