/* =========================
       PRICING
    ========================= */

    .pricing {
      background: #e8e6df;
    }

    .pricing h2 {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(55px, 8vw, 120px);
      line-height: .85;
      letter-spacing: -6px;
      margin-bottom: 70px;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2px;
      <!-- background: #bbb; -->
      border: 1px solid var(--upred);
	  color: var(--upred)
    }

    .price-card {
      background: var(--upyellow);
      padding: 35px;
      min-height: 390px;

      display: flex;
      flex-direction: column;
	  
	  border-radius: 30px / 20px;
    }

    .price-card.featured {
      background: var(--black);
      color: white;
    }

    .price-card h3 {
      font-family: "Space Grotesk", sans-serif;
      font-size: 26px;
    }

    .price-card .distance {
		color: var(--upred);
		margin-top: 5px;
		font-size: 13px;
    }
	
    .featured .distance {
      color: var(--upred);
    }
	
	.distance {
		color: var(--upred);
	}
	
	.price {
      margin-top: auto;

      font-family: "Space Grotesk", sans-serif;
      font-size: 65px;
      letter-spacing: -4px;
    }

    .price small {
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      letter-spacing: 0;
    }

    .price-button {
      display: block;
      margin-top: 25px;

      padding: 15px;
      text-align: center;

      border: 1px solid var(--upred);
      border-radius: 100px;

      font-weight: 700;
      font-size: 13px;
	  
	  background: var(--upyellow);
	  color: var(--upred);
    }
	
	.price-button:hover {
		border: 1px solid var(--upyellow);
		background: var(--upred);
		color: var(--upyellow);
	}

    .featured .price-button {
      background: var(--orange);
      border-color: var(--orange);
    }