/* ========================================
   WORK IN PROGRESS PAGE
======================================== */

.workinprogress-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 5vw 120px;
}


/* ========================================
   MAIN MESSAGE
======================================== */

.workinprogress-card {
  min-height: 520px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 70px 30px;

  text-align: center;

  background: var(--paper);

  border-radius: var(--radius-large);
}


.workinprogress-icon {
  width: 82px;
  height: 100px;

  margin-bottom: 28px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;

  padding: 18px;

  background: var(--soft-white);

  box-shadow:
    7px 7px 0 rgba(45, 42, 38, 0.08);
}


.workinprogress-icon span {
  display: block;

  width: 100%;
  height: 5px;

  background:
    rgba(45, 42, 38, 0.35);
}


.workinprogress-card h1 {
  max-width: 820px;

  margin: 8px 0 20px;

  font-size:
    clamp(48px, 7vw, 86px);

  line-height: 0.96;
}


.workinprogress-description {
  max-width: 620px;

  margin-bottom: 30px;

  font-size: 17px;
  line-height: 1.7;

  opacity: 0.68;
}


.workinprogress-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 12px;
}


/* ========================================
   AVAILABLE PRODUCTS
======================================== */

.workinprogress-products {
  padding-top: 100px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

  .workinprogress-page {
    padding:
      45px
      20px
      90px;
  }


  .workinprogress-card {
    min-height: 460px;

    padding:
      55px
      22px;
  }


  .workinprogress-actions {
    flex-direction: column;

    width: 100%;
  }


  .workinprogress-actions .button {
    width: 100%;
  }

}