/*--------------------------Grid-------------------------*/
:root {
    --c1: 50; /*46*/
    --c2: 20; /*60*/
    --c3: 20; /*58*/
}

.mainBlock {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, .7fr)); /*300px or full screen if not enough room*/
    justify-content: center;
    grid-column-gap: 200px;
    grid-row-gap: 50px;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c1),var(--c2),var(--c3),1), rgba(var(--c1),var(--c2),var(--c3),1)); /*gradient*/
    /*background-color: #2e3c3a;*/
    padding: 200px;
    padding-bottom: 50px;
    
}

.box { /*image with text beneath*/
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #C7675F;
    width: 200px;
    padding: 20px;
    margin: 20px;
    margin-top: 0;
    cursor:pointer;
    color:#FFF;
    font-size:1.5em;
    text-align: center;
    border-radius:20px;
    transition: all 1s ease;
    --notchSize: 30px;
  /*cut the edges slightly*/
    clip-path: 
        polygon(
            0% var(--notchSize), 
            var(--notchSize) 0%, 
            calc(100% - var(--notchSize)) 0%, 
            1000% var(--notchSize), 
            100% calc(100% - var(--notchSize)), 
            calc(100% - var(--notchSize)) 100%, 
            var(--notchSize) 100%, 
            -1000% calc(100% - var(--notchSize))
        );
}

.box > img { /*image formatting*/
    /*width: 50%;
    height: 50%;*/
    padding: 50px;
    /*margin-bottom: 40px;*/
}

.box:hover {
    transform: scale(1.15);
    /*box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.4) 0px -10px 20px;*/
    background-color: #BE9F9D;
}

.box:active {
    transform: rotate(2deg);
}

#browseAll {
    grid-area: 4/ 2;
    background-color: #DDD;
    color: #666;
}

hr {
    border: 0;
    grid-column: 1 / 4;
    clear:both;
    display:block;
    width: 96%;               
    background-color: #FFF;
    height: 2px;
}

:root {
    --c1: 50; 
    --c2: 20; 
    --c3: 20; 
    
    --c12: 70;
    --c22: 20;
    --c32: 20;
}

.mainBlock {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c1),var(--c2),var(--c3),1),  rgba(var(--c12),var(--c22),var(--c32),1),  rgba(var(--c12),var(--c22),var(--c32),1),  rgba(var(--c12),var(--c22),var(--c22),1),  rgba(var(--c1),var(--c2),var(--c3),1), rgba(var(--c1),var(--c2),var(--c3),1));