.session-guide {
  background: var(--cream) !important;
}

.guide-heading {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.guide-heading h2 {
  margin: .65rem 0 1rem;
  font-size: clamp(3.5rem, 7vw, 6rem);
}

.guide-heading p {
  color: rgba(10, 10, 10, .62);
  font-size: 1.05rem;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.guide-card {
  background: #fffdf7;
  border: 1px solid rgba(10, 10, 10, .1);
  border-top: 5px solid var(--gold);
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(40, 35, 20, .07);
}

.guide-card.expect-card {
  border-top-color: var(--green);
}

.guide-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.5rem;
  background: var(--black);
  color: var(--cream);
  border-radius: 50%;
}

.expect-card .guide-icon {
  background: var(--green);
}

.guide-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-card h3 {
  margin-bottom: 1.25rem;
  font-size: 2.4rem;
}

.guide-card ul {
  list-style: none;
  display: grid;
  gap: 1rem;
}

.guide-card li {
  position: relative;
  padding-left: 1.4rem;
  color: rgba(10, 10, 10, .67);
  line-height: 1.45;
}

.guide-card li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: .42rem;
  height: .42rem;
  background: var(--gold);
  border-radius: 50%;
}

.expect-card li::before {
  background: var(--green);
}

.guide-card strong,
.guide-help strong {
  color: var(--black);
}

.guide-help {
  margin: 2rem auto 0;
  padding: 1rem 1.25rem;
  max-width: 720px;
  background: rgba(181, 160, 100, .13);
  color: rgba(10, 10, 10, .68);
  text-align: center;
}

.guide-help a {
  color: #695817;
  font-weight: 700;
}

@media (max-width: 900px) {
  .guide-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin: auto;
  }

  .guide-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
  }

  .guide-card h3 {
    align-self: center;
  }

  .guide-card ul {
    grid-column: 2;
  }
}

@media (max-width: 600px) {
  .guide-heading {
    margin-bottom: 2rem;
    text-align: left;
  }

  .guide-heading h2 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  .guide-heading p {
    font-size: 1rem;
  }

  .guide-card {
    display: block;
    padding: 1.4rem;
  }

  .guide-icon {
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: 1rem;
  }

  .guide-card h3 {
    margin-bottom: 1rem;
    font-size: 2.15rem;
  }

  .guide-card ul {
    gap: .8rem;
  }

  .guide-help {
    margin-top: 1.25rem;
    text-align: left;
  }
}