.design-wrapper {
  display: flex;
  flex-direction: column;
  padding-block: 1.5rem;
  align-items: center;
  gap: 2rem;
}

.design-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.design-title {
  font-size: 2rem;
  color: #e5ac48;
}

.design-label {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 150%;
}

.design-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;

  img {
    width: 100%;
  }
}

.design-how {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 1rem;
}

.design-steps {
  padding: 1.5rem;
  border: 8px solid #d0c7b3;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(
    270deg,
    rgba(249, 231, 188, 0.21) 0%,
    rgba(255, 255, 255, 0.21) 55.92%
  );
}

.design-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem 1rem;
}

.design-step-num {
  font-family: var(--font-secondary);
  font-size: 2rem;
  padding: 0.75rem;
  width: fit-content;
  background: linear-gradient(
    90deg,
    rgba(252, 223, 170, 0.9) 33.33%,
    rgba(255, 251, 236, 0) 100%
  );
}

@media all and (max-width: 1023px) {
  .design-how,
  .design-imgs {
    grid-template-columns: 1fr;

    img {
      max-width: 500px;
    }
  }

  .design-label {
    font-size: 1rem;
  }

  .design-title {
    font-size: 1.5rem;
  }

  .design-steps {
    padding: 1rem;
  }
}