.py-navigation-products-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:2.1rem;list-style:none;margin:0;padding:0}
@media only screen and (min-width:48em){
.py-navigation-products-box{gap:2.8rem 2.4rem}
}
.py-navigation-products-box .py-item{position:relative;animation:fadeIn ease .3s}
.py-navigation-products-box .py-item a{width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:1}
.py-navigation-products-box .py-item a:focus~figure,.py-navigation-products-box .py-item a:hover~figure{background:#fff;box-shadow:inset 0 0 0 1px #6a3bc1}
.py-navigation-products-box .py-item a:focus~.py-heading,.py-navigation-products-box .py-item a:hover~.py-heading{color:#6a3bc1}
.py-navigation-products-box .py-item figure{text-align:center;background-color:#f9f9f9;border-radius:.2rem;transition:all .3s ease 0s;margin:0;padding:2.1rem}
.py-navigation-products-box .py-item figure img{height:5.1rem;-o-object-fit:contain;object-fit:contain}
.py-navigation-products-box .py-item .py-heading{font-size:1.4rem;line-height:2.1rem;text-align:left;color:#40334f;transition:all .3s ease 0s}
@media only screen and (min-width:48em){
.py-navigation-products-box .py-item .py-heading{font-size:1.6rem;line-height:2.4rem}
}