.p-section-featured-style1 {
  --height: 20rem;
  --angle: 25deg;
  --angle-negative: -25deg;

  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--v-spacing__xs);
  transform: skew(var(--angle-negative));
  margin: 0 -8%;
}

.p-section-featured-style1__item {
  position: relative;
  height: var(--height);
  color: var(--v-color__light);
  overflow: hidden;
}

.p-section-featured-style1__item-picture {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.p-section-featured-style1__item-picture-img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  transform: skew(var(--angle)) scale(1.4);
  opacity: 0.6;
  transition: var(--v-transition__default);
}

.p-section-featured-style1__item:hover .p-section-featured-style1__item-picture-img {
  opacity: 1;
}

.p-section-featured-style1__item-title {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 20;
  font-size: 2rem;
  line-height: 1.1;
  font-family: var(--v-font-family__alt1);
  padding: 2rem 3rem;
  text-align: center;
  transform: skew(var(--angle));
}

.p-section-featured-style1 > :nth-child(1) .p-section-featured-style1__item-title {
  text-align: right;
}

.p-section-featured-style1 > :nth-child(3) .p-section-featured-style1__item-title {
  text-align: left;
}

@media (min-width: 1700px) {
  .p-section-featured-style1 {
    --height: 25rem;
  }

  .p-section-featured-style1__item-title {
    font-size: 3rem;
  }
}

@media (min-width: 2000px) {
  .p-section-featured-style1 {
    --height: 30rem;
    margin: 0 -5%;
  }

  .p-section-featured-style1__item-title {
    font-size: 3.5rem;
  }
}