:root {
  --hp-section-padding: 10px;
  --mobile-breakpoint: 640px;
}

.hp-section {
  padding: var(--hp-section-padding);
}


.shop-nav-middle {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}
.shop-nav-middle a span {
	display: none;
	position: relative;
	z-index: 2;
}
.shop-nav-middle a {
  position: relative;
  width: 100%;
  color: #fff;
  line-height: 32px;
  padding-bottom: 10px;
  font-size: 26px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  text-transform: uppercase;
  font-family: Georgia, serif;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  height: 250px;
}
.shop-nav-middle a::after {
	/*content: "";*/
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s ease;
}
.shop-nav-middle a:hover::after {
	opacity: 1;
}
.shop-nav-middle a.nav-item-1 {
  background-image: url(Images/brian.jpg);
}
.shop-nav-middle a.nav-item-2 {
  background-image: url(Images/caramaderie.jpg);
}
.shop-nav-middle a.nav-item-3 {
  background-image: url(Images/locus.jpg);
}
.shop-nav-middle a.nav-item-4 {
  background-image: url(Images/nhv.jpg);
}
.shop-nav-middle a.nav-item-5 {
  background-image: url(Images/treveri.jpg);
}
.shop-nav-middle a.nav-item-6 {
  background-image: url(Images/wilridge.jpg);
}

@media (min-width: 640px) {
  .shop-nav-middle a {
    width: calc(33% - 34px);
  }
}