.mockup-product-widget {
  width: 100%;
  position: relative;
  background-color: var(--dark-bg);
  color: var(--white-text);
  padding-top: max(3.75vw, 48px);
  padding-bottom: max(3.75vw, 48px);
  overflow: hidden;
}

.mockup-product-widget .mockup {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 50%;
  height: auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.mockup-product-widget .text {
  position: relative;
  z-index: 2;
  width: 44%;
  margin-bottom: max(48px, 5.4vw);
}

.mockup-product-widget .text h5 {
  margin-bottom: max(24px, 2.1vw);
  font-family: "OverusedGrotesk" !important;
  font-weight: 500;
}

.mockup-product-widget .text h1 {
  margin-bottom: max(12px, 0.833vw);
}

.mockup-product-widget .items {
  position: relative;
  z-index: 2;
  width: 38%;
  display: flex;
  flex-wrap: wrap;
}

.mockup-product-widget .items .item {
  width: 50%;
  border: 1px solid var(--dark-border);
  padding: max(1.667vw, 16px);
}

.mockup-product-widget .items .item img {
  height: max(24px, 1.667vw);
  width: auto;
  margin-bottom: 8px;
}

.mockup-product-widget .items .item h6 {
  font-size: max(16px, 1.25vw);
  margin-bottom: 8px;
  font-family: "OverusedGrotesk" !important;
  font-weight: 500;
}

@media (max-width: 1020px) {
  .mockup-product-widget .mockup {
    position: relative;
    top: unset;
    right: unset;
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    transform: unset;
    -webkit-transform: unset;
    display: flex;
  }

  .mockup-product-widget .text {
    width: 100%;
    margin-bottom: 12px;
  }
  .mockup-product-widget .items {
    width: 100%;
    margin-top: 12px;
  }
}