/* =========================================================
   Mizunara Studio
   Component / Builder
   Diseña tu invitación ideal
========================================================= */

/* =========================================================
   GRID
========================================================= */

.builder-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 30px;

  margin-top: 50px;
}

/* =========================================================
   CARD
========================================================= */

.builder-card {
  padding: 34px;

  border-radius: 32px;
}

/* =========================================================
   LABEL
========================================================= */

.builder-label {
  display: inline-block;

  margin-bottom: 18px;

  padding:
    8px
    14px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.55);

  color: var(--gold);

  font-size: 0.85rem;

  font-weight: 700;
}

/* =========================================================
   TITLE
========================================================= */

.builder-card h3 {
  margin-bottom: 12px;

  font-size: 1.8rem;
}

/* =========================================================
   PRICE
========================================================= */

.price {
  margin-bottom: 22px;

  color: var(--gold);

  font-weight: 700;
}

/* =========================================================
   LIST
========================================================= */

.builder-card li {
  display: flex;

  align-items: center;

  margin-bottom: 12px;

  line-height: 1.5;
}

.builder-card img {
  width: 20px;
  height: 20px;

  margin-right: 10px;

  flex-shrink: 0;
}

/* =========================================================
   FEATURE PILLS
========================================================= */

.feature-pills {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.feature-pills span {
  display: flex;

  align-items: center;

  gap: 8px;
}

.feature-pills img {
  width: 18px;
  height: 18px;

  margin-right: 0;

  flex-shrink: 0;
}

/* =========================================================
   CTA
========================================================= */

.builder-cta {
  max-width: 850px;

  margin:
    45px
    auto
    0;

  padding: 35px;

  border-radius: 30px;

  text-align: center;
}

.builder-cta h3 {
  margin-bottom: 12px;

  font-size: 2rem;
}

.builder-cta p {
  margin-bottom: 24px;

  opacity: 0.85;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  .builder-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {

  .builder-card,
  .builder-cta {
    padding: 26px;
  }
}