.p-section-featured-categories__item {
  --size-line: 2px;
  --spacing: calc( var(--v-spacing__md) / 2.5 );
}

.p-section-featured-categories__item-inner {
  display: block;
  text-decoration: none;
}

.p-section-featured-categories__item-inner:hover {
  color: var(--v-color__4);
}

.p-section-featured-categories__picture {
  aspect-ratio: 200 / 150;
  position: relative;
}

.p-section-featured-categories__picture-img {
  border-radius: var(--v-border-radius__md);
}

.p-section-featured-categories__picture::before,
.p-section-featured-categories__picture::after {
  content: "";
  position: absolute;
  z-index: 20;
  background-color: var(--v-color__5);
  transition: var(--v-transition__default);
}

.p-section-featured-categories__picture::before {
    width: var(--size-line);
    height: 0;
    bottom: calc( var(--spacing) * -2 );
    left: calc( var(--spacing) * -1 );
}

.p-section-featured-categories__item-inner:hover .p-section-featured-categories__picture::before {
  height: 100%;
}

.p-section-featured-categories__picture::after {
  width: 0;
  height: var(--size-line);
  left: calc( var(--spacing) * -2 );
  bottom: calc( var(--spacing) * -1 );
}

.p-section-featured-categories__item-inner:hover .p-section-featured-categories__picture::after {
  width: 100%;
}

.p-section-featured-categories__title {
  padding-top: calc( ( var(--spacing) * 2 ) - 0.5rem );
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
}

@media (min-width: 500px) {
  .p-section-featured-categories__item {
    flex-basis: 50%;
  }
}