/* PORTFOLIO */
.lv .portfolio {
  padding: 0 1.8rem 3rem 0rem;
}

.lv .portfolio img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.lv .portfolio .designs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}

.lv .portfolio .designs-item {
  display: flex;
  padding: 1.25rem 0;
  width: 100%;
}

.lv .portfolio .designs .card {
  border-radius: 25rem;
  background: linear-gradient(180deg,
      rgb(255, 255, 255, 1) 52%,
      rgba(245, 245, 245, 1) 100%);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lv .portfolio .designs .card:hover .card-img {
  filter: contrast(100%);
}

.lv .portfolio .designs .card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.5rem 0 3rem 0;
}

.lv .portfolio .designs .card-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}

.lv .portfolio .designs .card-img::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

/* xs: 360px,  sm: 540px,   md: 720px,   lg: 960px,   xl: 1140px,   xxl: 1320px */
@media (min-width: 360px) {
}

@media (min-width: 540px) {
  .lv .portfolio .designs-item {
    padding: 1.75rem 1rem;
  }
}

@media (min-width: 720px) {
  .lv .portfolio .designs-item {
    padding: 1.5rem 1.1rem;
    width: 50%;
  }

  .lv .portfolio .designs .card-img::before {
    padding-top: 66%;
  }
}

/* Desktop: double the size */
@media (min-width: 960px) {
  .lv .portfolio .designs-item {
    padding: 1.75rem 1.25rem;
  }
}

@media (min-width: 1140px) {
  .lv .portfolio .designs-item {
    padding: 2rem 1.5rem;
  }
}

@media (min-width: 1320px) {
  .lv .portfolio .designs-item {
    padding: 3.5rem 1.5rem;
    width: 33%;
  }
}

@media (min-width: 1570px) {
  .lv .portfolio .designs-item {
    padding: 3.5rem 2rem;
    width: 33%;
  }
  .lv .portfolio .designs .card-content {
    padding: 1.5rem 0 3rem 0;
  }
}