@charset "utf-8";
/* CSS Document */
.menu{
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%,300px), calc(90%/3)));/*division*/
    justify-content: center;
    column-gap: calc(10%/6);
    row-gap: 40px;
    text-align: center;
}
.auxiliar{
    width: 90%;
    margin: 0 auto;
    padding: 40px 0 0 0;
    display: grid;
    justify-content: center;
    text-align: center;
}
.menu > div, .auxiliar > div{
    width: 50%;
    position: relative;
    justify-self: center;
    cursor: pointer;
    transform: perspective(1px) translateZ(0);
    transition-duration: 300ms;
    transition-property: transform;
}

.auxiliar > div{
    width: auto;
}
.menu > div a, .auxiliar > div a{
    text-decoration: none;
    color: #000000;
}
.menu > div img, .auxiliar > div img{
    width: 100%;
}

.menu > div::before, .auxiliar > div::before{
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: " ";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
    transition: 0.1s ease-in-out;
    transition-property: transform, opacity;
}

.menu > div:hover,.menu > div:focus, .menu > div:active , 
.auxiliar > div:hover, .auxiliar > div:focus, .auxiliar > div:active{
    transform: translateY(-5px);
}

.menu > div:hover:before, .menu > div:focus:before, .menu > div:active:before, 
.auxiliar > div:hover::before, .auxiliar > div:focus:before, .auxiliar > div:active:before{
    opacity: 1;
    transform: translateY(5px);
}