.darbas-container {
  padding-top: max(80px, 5.5vw) !important;
  padding-bottom: max(80px, 5.5vw) !important;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  &:nth-child(odd) {
    background-color: #e3e3e3;
    .darbas-media {
      background-color: white;
    }
  }
}

.darbas-container,
.darbas-content {
  gap: max(32px, 3.5vw);
}

.darbas-title-wrapper {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  .darbas-pries-po {
    font-family: Sometype Mono;
    font-size: max(16px, 1.4vw);
  }
}

.darbas-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 8vw;
}

.darbas-description,
.darbas-description-secondary,
.darbas-text-under-media {
  *:first-child {
    margin-top: 0;
  }
}

.darbas-image {
  display: flex;
  img {
    width: 100%;
  }
}

.darbas-short-content-wrapper {
  width: 22%;
  min-width: 22%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: max(26px, 1.8vw);
  min-height: 35.8vw;
  flex-wrap: wrap;
}

.darbas-media-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: max(32px, 2.8vw);
  align-items: end;
  .darbas-media {
    height: 35.8vw;
    width: 100%;
    background-color: #e3e3e3;
    display: flex;
    justify-content: center;
    img {
      width: 100%;
      object-fit: cover;
    }
    .video-play-wrapper video {
        display: flex;
        width: auto;
      object-fit: cover;
    }
  }
}

.darbas-text-under-media {
  width: calc(100% - (calc(2 2% + 8vw)));
  align-self: flex-end;
}

.darbas-image,
.darbas-description {
  flex: 1;
}

@media screen and (max-width: 1024px) {
  .darbas-content {
    flex-direction: column;
    gap: max(32px, 5vw);
  }
  .darbas-short-content-wrapper {
    width: 100%;
    min-width: 100%;
    flex-direction: row;
    gap: inherit;
    .darbas-image {
      height: 100%;
      min-width: 40%;
      img {
        object-fit: contain;
      }
    }
  }
  .darbas-media-wrapper {
    align-items: flex-start;
    .darbas-media {
      width: 100%;
    }
  }
  .darbas-description-secondary {
    order: 20;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .darbas-media-wrapper {
    .darbas-media {
      background-color: unset;
      height: auto;
      .video-play-wrapper video {
          height: auto;
      }
      .desktop {
        display: none;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .darbas-media-wrapper .darbas-media {
    .mobile {
      display: none;
    }
  }
}