.projecten-widget {
  --blue: #55BDC1;
  --white: #ffffff;
  --gray: #495663;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.projecten-widget__project {
  scroll-snap-align: start;
  background-position: center;
  background-size: cover;
  min-width: 330px;
  min-height: 603px;
  aspect-ratio: 2/1;
  flex-grow: 1;
  padding: 38px 26px;
  align-items: end;
  display: flex;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .projecten-widget__project:hover .projecten-widget__hover-card {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 1023px) {
  .projecten-widget__project {
    padding: 40px;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
  }
}
.projecten-widget__title {
  color: var(--white);
  font-family: Manrope;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px; /* 116% */
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  .projecten-widget__title {
    transform: rotate(-90deg);
    transform-origin: left;
    color: var(--blue);
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 29px; /* 145% */
    letter-spacing: 5.8px;
    text-transform: uppercase;
  }
}
.projecten-widget__description-mobile {
  display: none;
  color: var(--white);
  font-family: Manrope;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  .projecten-widget__description-mobile {
    display: block;
  }
}
.projecten-widget__hover-card {
  position: absolute;
  background-color: var(--blue);
  width: 100%;
  height: 100%;
  padding: 30px;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease-in-out 0.15s, opacity 0.45s ease-in-out;
  transform: translateY(100%);
  opacity: 0;
}
.projecten-widget__hover-card__top-title {
  margin-bottom: 20px;
  color: var(--white);
  font-family: Manrope;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px; /* 116% */
  text-transform: uppercase;
}
.projecten-widget__hover-card__text {
  color: #FFF;
  font-family: Manrope;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 160% */
}
.projecten-widget__hover-card__bottom-title {
  color: var(--gray);
  font-family: Manrope;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px; /* 116% */
  text-transform: uppercase;
}/*# sourceMappingURL=projecten.css.map */