/*
 * Gravel Grinders Way spacing and marker refinement.
 *
 * Keep the approved mixed-surface Grindline and custom Oxide bullet mark, but
 * give the title, divider and principles enough vertical breathing room.
 */

.mini-grind {
  object-fit: contain;
  object-position: left center;
}

.stamp {
  object-fit: contain;
}

.rules {
  display: flex !important;
  flex-direction: column;
}

.rule-row {
  display: flex;
  align-items: center;
}

.rule-x {
  position: relative;
  color: transparent !important;
  line-height: 1;
}

.rule-x::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  background: url("way-bullet-x.svg") center / contain no-repeat;
}

@media screen and (min-width: 761px) {
  .way {
    min-height: 244px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .way h2 {
    margin-bottom: 8px !important;
  }

  .mini-grind {
    width: 286px !important;
    height: 18px !important;
    margin: 0 0 16px !important;
  }

  .rules {
    gap: 7px !important;
    line-height: 1.35 !important;
  }

  .rule-row {
    min-height: 18px;
  }

  .rule-x {
    width: 26px !important;
    flex: 0 0 26px !important;
    font-size: 16px !important;
  }
}

@media screen and (min-width: 761px) and (max-width: 1023px) {
  .way {
    gap: 32px !important;
  }
}

@media screen and (max-width: 760px) {
  .way {
    padding-top: 42rem !important;
    padding-bottom: 46rem !important;
  }

  .way-left {
    margin-bottom: 30rem !important;
  }

  .way h2 {
    margin-bottom: 10rem !important;
  }

  .mini-grind {
    height: 24rem !important;
    margin: 0 0 18rem !important;
  }

  .rules {
    gap: max(7px, 10rem) !important;
    line-height: 1.35 !important;
  }

  .rule-x {
    width: 30px !important;
    flex: 0 0 30px !important;
    font-size: max(16px, 20rem) !important;
  }
}