/************************/
/* CHECKOUT PROGRESS SECTION */
/************************/
.section-checkout-progress {
  padding: 9rem 0 9.6rem 0;
}
/* Base width 130rem */
.checkout-progress {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  font-size: 2rem;
}
/* base 130 / 3 = 43.33 */
.checkout-progress-tab {
  text-align: center;
  width: 43.33rem;
  height: 10rem;
  border-bottom: 1rem solid #ccc;
}
.checkout-progress-tab:nth-child(1) {
  border-bottom-color: #e67e22;
}

/************************/
/* CHECKOUT CONTENT SECTION */
/************************/
.section-checkout-content {
  padding: 9rem 0 9.6rem 0;
}
/* Base width 130rem */
.checkout-content {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
}
/* (base 130 - gap 4) / 3 * 2 = 84 */
.horizontal-line-main-header {
  margin: 0 0 2rem;
  width: 84rem;
}
.horizontal-line-main {
  margin: 2rem 0;
  width: 84rem;
}
.checkout-cart-item {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3rem;
}
.cart-item-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* 84 / 4 = 21 */
.cart-item-img img {
  width: 21rem;
}
.cart-item-product-name {
  font-size: 2rem;
}
.cart-item-product-brief {
  font-size: 1.4rem;
}
.cart-item-product-price {
  font-size: 2rem;
}
.cart-item-quantity {
  text-align: right;
  position: relative;
}
.cart-item-quantity-input {
  text-indent: 1rem;
  line-height: 4rem;
  font-size: 2rem;
}

/* 84 / 2 = 42 */
.horizontal-line-summary-header {
  margin: 0 0 2rem;
  width: 42rem;
}
.horizontal-line-summary {
  margin: 2rem 0;
  width: 42rem;
}
.checkout-content-summary {
  text-transform: uppercase;
}
.summary-coupon-code-input {
  height: 4rem;
  font-size: 2rem;
  text-indent: 1rem;
  text-transform: uppercase;
}
.summary-prices-calculation {
  font-size: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.summary-prices-calculation > div,
.summary-total-calculation > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.summary-prices-calculation > div > div:nth-child(2),
.summary-total-calculation > div > div:nth-child(2) {
  text-align: right;
}
.checkout-buttons {
  display: flex;
  flext-direction: column;
  align-items: center;
  gap: 2rem;
}
.checkout-next-btn,
.checkout-cancel-btn {
  width: 20rem;
  padding: 1.6rem 3.2rem;
}

.summary-total-calculation {
  font-size: 3rem;
}

/* 1rem = 1em = 16px */

/************************/
/* BELOW 1400px (Reduce Some Sizes, Above 1200px) */
/************************/

@media (max-width: 87.5em) {
}

/************************/
/* BELOW 1200px (Large devices, Above 992px) */
/************************/

@media (max-width: 75em) {
  .checkout-progress,
  .checkout-content {
    max-width: 120rem;
  }
  /* base 120 / 3 = 40 */
  .checkout-progress-tab {
    width: 40rem;
  }
  /* (base 120 - gap 4) / 3 * 2 = 77.33 */
  .horizontal-line-main-header {
    width: 77.33rem;
  }
  .horizontal-line-main {
    width: 77.33rem;
  }
  /* 77.33 / 2 = 38.66 */
  .horizontal-line-summary-header {
    width: 38.66rem;
  }
  .horizontal-line-summary {
    width: 38.66rem;
  }
}

/************************/
/* BELOW 992px (Medium devices, Above 768px) */
/************************/

@media (max-width: 62em) {
  .checkout-progress,
  .checkout-content {
    max-width: 100rem;
  }
  /* base 100 / 3 = 33.33 */
  .checkout-progress-tab {
    width: 33.33rem;
  }
  /* (base 100 - gap 4) / 3 * 2 = 64 */
  .horizontal-line-main-header {
    width: 64rem;
  }
  .horizontal-line-main {
    width: 64rem;
  }
  /* 64 / 2 = 32 */
  .horizontal-line-summary-header {
    width: 32rem;
  }
  .horizontal-line-summary {
    width: 32rem;
  }
}

/************************/
/* BELOW 768px (Medium devices, Above 576px) */
/************************/

@media (max-width: 48em) {
  .checkout-progress,
  .checkout-content {
    max-width: 80rem;
  }
  /* base 80 / 3 = 26.66 */
  .checkout-progress-tab {
    width: 26.66rem;
  }
  /* (base 80 - gap 4) / 3 * 2 = 50.66 */
  .horizontal-line-main-header {
    width: 50.66rem;
  }
  .horizontal-line-main {
    width: 50.66rem;
  }
  /* 50.66 / 2 = 25.33 */
  .horizontal-line-summary-header {
    width: 25.33rem;
  }
  .horizontal-line-summary {
    width: 25.33rem;
  }
}

/************************/
/* BELOW 576px (Small devices, Above 280px) */
/************************/

@media (max-width: 36em) {
  .checkout-progress,
  .checkout-content {
    max-width: 50rem;
  }
  /* base 50 / 3 = 16.66 */
  .checkout-progress-tab {
    width: 16.66rem;
  }
  .checkout-content {
    grid-template-columns: 1fr;
  }
  .horizontal-line-summary {
    width: 50rem;
  }
}