.dashboard-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.dashboard-wrapper .menu-col .menu-block:hover{
box-shadow: 0 0 15px rgba(0,0,0,.5);
  -webkit-filter: brightness(1.3);
  filter: brightness(1.3);
}
.dashboard-wrapper .menu-col .menu-block img{
  width: 100%;
}
.dashboard-wrapper .menu-col .menu-block::before{
content: '';
  display: block;
  position: absolute;
  background: rgba(255,255,255,.5);
  width: 60px;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5;
  filter: blur(30px);
  transform: translateX(-100px) skewX(-15deg);
}
.dashboard-wrapper .menu-col .menu-block:hover::before {
  transform: translateX(600px) skewX(-15deg);
  opacity: .6;
  transition: .9s;
}

.dashboard-wrapper{
  --content-width: calc(100vw - 150px);
  --gutter: 1vw;
  --columns: 1;
  --row-size: calc(
  ( var(--content-width) - (var(--gutter) * (var(--columns) - 1)))
  / var(--columns));
  display: grid;
  width: 100%;
  max-width: var(--content-width);
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-auto-rows: var(--row-size);
  grid-column-gap: var(--gutter);
  grid-row-gap: var(--gutter);
}


.menu-block{background-color: #000;border-radius: 1vw;overflow: hidden;position: relative;background-image: url(images/base-menuthumbs.png);background-size: cover;background-repeat: no-repeat;background-position: center;}
.menu-block::before{
  content:'';
  position: absolute;
  background-color: var(--skin-color-1);
  width: 100%;
  height: 100%;
  mix-blend-mode: color;
  filter: saturate(0.7);
  cursor:pointer;
}
.menu-block>a:hover::before{
  filter:unset;
}

.menu-block>a{
  position:relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  text-decoration: none;
  height: 100%;
}

.menu-block>a>label{
  display: block;
  background-color: var(--skin-color-2);
  color: var(--skin-color-1-txt);
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 1vw;
  font-weight: 800;
  padding: 0.5vw 2vw;
  text-align: center;
  border-radius: 2vw;
  margin: 0 auto;
  /* position: absolute; */
  bottom: 1vw;
  /* right: 50%; */
  /* transform: translateX(50%); */
}

.menu-block.menu-block-square>a>.imgwrap{width:100%;flex: 0 0 70%;/* height:100%; */display: flex;align-items: center;justify-content: center;}
.menu-block>a>.imgwrap img{
    /* width: 100%; */
    /* height: 100%; */
    object-fit: contain;
    -webkit-filter: drop-shadow(0px 0.7vw 0.2vw #000);
    filter: drop-shadow(0px 0.7vw 0.2vw #000);
    position: relative;
    max-width: 50%;
}
.menu-block.banner>a>.imgwrap img{max-width: unset;width: 100%;}
.menu-block.banner>a>label{display:none}

.grid-wrapper {
    padding: 2em;
}

.menu-block.new:after {
    content: 'new';
    position: absolute;
    top: 0;
    z-index: 10;
    color: #fff;
    font-weight: 800;
    font-size: 2vw;
    padding: 0.5vw 4vw;
    text-transform: uppercase;
    background-image: linear-gradient(#ff3e3e, #ab0000);
    transform: rotate(-45deg) translate(-25%,-50%);
    box-shadow: 0px 0.3vw 0.5vw #00000094;
}





@media (max-width: 792px){
  .dashboard-wrapper{
    --columns: 3;
  }
  .menu-block>a>label{font-size: 9px;border-radius: 1vw;padding: 1vw;font-weight: 600;}
}

@media (max-width:1024px){
  .dashboard-wrapper{
    --columns: 3;
    --content-width: calc(100vw - 20px);
    --gutter: 10px;
  }
  .grid-wrapper{padding: 10px;}  
}

@media (min-width: 1200px){
  .dashboard-wrapper{
    --columns: 5;
  }
}
/*
.menu-block>a>.imgwrap:after {
  content: '';
  background-image: linear-gradient(var(--skin-color-1-light) 0%, var(--skin-color-1-dark) 100%);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: block;
  position: absolute;
}
.menu-block>a>label {
  font-size: 13px;
  transform: translate(50%, -50%);
  bottom: unset;
  top: 50%;
  color: var(--skin-color-1);
  background-color: var(--skin-color-1-txt);
}
  */