.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 {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-gap: .6rem;
    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 {
        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(.79, .19, .62, .96);

        &: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;
        }
        
        &:hover {
            background: #FFFFFF;
            color: #25D172;
            cursor: pointer;
        }
    }
}


@media screen and (max-width: 30rem) {
    .my-grid {
        display: block;

        &__item {
            display: block;
            margin-top: .6rem;

            &: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;
            }
        }
    }
}