/* Fixed membership layout; content is managed through the block forms. */
.membership-cards {
  margin: 2rem auto;
  padding: clamp(1.25rem, 4vw, 4rem);
  background: #e7efe9;
  color: #171717;
  max-width: 1440px;
}
.membership-cards__heading {
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid currentColor;
}
.membership-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2rem;
  padding: .25rem .25rem 1.5rem;
}
.membership-cards__grid > .field__item {
  min-width: 0;
  display: flex;
}
.membership-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: #fff;
  color: #171717;
  overflow-wrap: anywhere;
}
.membership-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.membership-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}
.membership-card__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.membership-card__heading h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}
.membership-card__price { font-size: 1rem; }
.membership-card__benefits { margin-bottom: 1.5rem; }
.membership-card__benefits ul { padding-left: 1.25rem; }
.membership-card__actions { margin-top: auto; }
.membership-card__actions .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.membership-card__actions .field__item { display: flex; }
.membership-card__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1rem;
  border: 2px solid #171717;
  background: #171717;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.membership-card__actions .field__item + .field__item a { background: #fff; color: #171717; }
.membership-card__actions a:hover { text-decoration: underline; }
.membership-card a:focus-visible { outline: 3px solid #005ea8; outline-offset: 3px; }
@media (max-width: 639px) {
  .membership-cards__grid { gap: 1rem; }
  .membership-card__body { padding: 1rem; }
  .membership-card__heading { flex-wrap: wrap; gap: .5rem; }
}