/*
 * For Members (page-for-members.php)
 * Section styles for template-parts/members/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, the audience switcher, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Inner measures inside .container--wide (1686px of content):
 *   hero                                — 1584px (168px page margins), matching
 *                                          the other three audience pages' heroes
 *   benefits / portal                   — 1496px (212px page margins)
 *   experience / care / videos / terms  — 1368px (276px page margins)
 *   pharmacies                          — 1332px (294px page margins)
 */

/* ==========================================================================
   Shared to this page
   ========================================================================== */
.members-eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.members-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
}
.members-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}
.members-hero .accent,
.members-benefits .accent,
.members-portal .accent,
.members-experience .accent,
.members-care .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.members-hero {
  background: var(--c-white);
  /* Matches the For Employers hero's top/bottom padding, so the eyebrow sits
     the same distance below the header on every audience page. */
  padding-block: clamp(1.5rem, calc(3.8 * var(--vw)), 4.56rem);
}
.members-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  /* Copy column stays 826fr, same as the other three audience heroes, so the
     H1's line breaks don't shift — only the art column grows to fill the wide
     measure's extra width, matching the shared 168px page margin. */
  grid-template-columns: minmax(0, 826fr) minmax(0, 758fr);
  align-items: center;
}
/* Spacing only — the pill rail itself is the global .audience-switcher */
.members-hero__switcher {
  margin-top: clamp(1.25rem, calc(1.51 * var(--vw)), 1.8125rem);
}
.members-hero__title {
  margin-top: clamp(1.25rem, calc(1.93 * var(--vw)), 2.3125rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.members-hero__line {
  display: block;
}
@media (min-width: 992px) {
  /* "Your Pharmacy Benefits" otherwise breaks after "Pharmacy" at desktop
     widths — the copy column has room to spare before the art starts, so
     hold both lines to one line each rather than letting the H1 wrap. */
  .members-hero__line {
    white-space: nowrap;
  }
}
.members-hero__btn {
  margin-top: clamp(1.5rem, calc(2.92 * var(--vw)), 3.5rem);
  padding-inline: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
  text-transform: uppercase;
  font-weight: 600;
}
/* 372 wide, offset 234 into the 670px column — as drawn, then sized down
   ~15% and nudged further right per the launch sweep: it was crowding the
   H1 and getting squished at in-between widths. */
.members-hero__art {
  --hero-art-w: 316;
  --hero-art-inset: 40;
}

/* ==========================================================================
   Your benefits, working for you
   ========================================================================== */
.members-benefits {
  background: var(--c-cream);
  padding-block: clamp(2.75rem, calc(6.72 * var(--vw)), 8.064rem);
}
.members-benefits__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  color: var(--c-charcoal);
}
.members-benefits__intro {
  max-width: min(1159px, calc(60.3646 * var(--vw-inset)));
  margin: clamp(1rem, calc(1.93 * var(--vw)), 2.3125rem) auto 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: center;
  color: var(--c-charcoal);
}
.members-benefits__grid {
  max-width: var(--measure-mid);
  margin: clamp(2rem, calc(3.96 * var(--vw)), 4.75rem) auto 0;
  display: grid;
  grid-template-columns: 32.82% 29.41% 31.28%; /* 491 / 440 / 468 of 1496 */
  justify-content: space-between;
  align-items: start;
}
.members-benefits__figure {
  grid-row: 1 / span 2;
  margin: 0;
}
.members-benefits__figure img {
  width: 100%;
  aspect-ratio: 491 / 777;
  object-fit: cover;
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
}
.members-explainer__title {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.members-explainer__body {
  margin-top: clamp(1rem, calc(1.51 * var(--vw)), 1.8125rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.members-explainer__link {
  display: inline-block;
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.8;
  color: var(--c-orange);
}
.members-explainer__link:hover {
  text-decoration: underline;
}
/* The disclaimer runs under the two explainer columns, not the photo */
.members-benefits__note {
  grid-column: 2 / -1;
  margin-top: clamp(1.5rem, calc(2.4 * var(--vw)), 2.875rem);
  padding-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  border-top: 1px solid rgba(57, 57, 57, 0.5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-ui);
  line-height: 1.8;
  color: var(--c-charcoal);
}

/* ==========================================================================
   The member portal
   ========================================================================== */
.members-portal {
  background: var(--c-ice);
  padding-block: clamp(2.25rem, calc(5.1042 * var(--vw)), 6.125rem); /* 98 */
}
.members-portal__inner {
  /* Narrowed ~12% from --measure-mid: the 4 benefit cards lost their body
     copy, so the section reads better pulled in a bit. Widened back out by
     the column-gap below so the extra gutter doesn't squeeze the copy
     column enough to wrap "Register once in the member portal and you can:". */
  max-width: min(1396px, calc(72.7334 * var(--vw-inset)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 727fr) minmax(0, 769fr);
  column-gap: clamp(2rem, calc(4.1667 * var(--vw)), 5rem); /* 80 */
  align-items: start;
}
.members-portal__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.44;
  color: var(--c-charcoal);
}
.members-portal__line {
  display: block;
}
.members-portal__lead {
  margin-top: clamp(1rem, calc(2.4 * var(--vw)), 2.875rem);
  font-size: var(--fs-body);
  line-height: 1.44;
  color: var(--c-charcoal);
}
.members-portal__art {
  margin-top: clamp(1.75rem, calc(3.3333 * var(--vw)), 4rem); /* 64 */
  width: 74.83%; /* 544 of 727 */
}
.members-portal__art img {
  width: 100%;
  height: auto;
}
.members-portal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 341fr) minmax(0, 388fr);
  column-gap: 4.81%; /* 37 of 769 */
  row-gap: clamp(1.5rem, calc(2.7083 * var(--vw)), 3.25rem); /* 52 */
}
@media (min-width: 992px) {
  .members-portal__list {
    align-self: center;
    justify-self: center;
    width: fit-content;
  }
}
.members-portal-item__icon {
  width: auto;
  height: clamp(34px, calc(2.6 * var(--vw)), 50px);
}
.members-portal-item__title {
  margin-top: clamp(1rem, calc(1.2 * var(--vw)), 1.4375rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.44;
  color: var(--c-charcoal);
}
.members-portal-item__body {
  margin-top: clamp(0.75rem, calc(1.1979 * var(--vw)), 1.4375rem); /* 23 */
  font-size: var(--fs-body);
  line-height: 1.44;
  color: var(--c-charcoal);
}
.members-portal__cta {
  grid-column: 1 / -1;
  margin-top: clamp(2.25rem, calc(4.84375 * var(--vw)), 5.8125rem); /* 93 */
  text-align: center;
}
.members-portal__btn {
  /* A fixed pill in the comp, not a hug-the-label button. */
  width: min(100%, 318px, calc(16.5577 * var(--vw-inset))); /* 317.9 */
  text-transform: uppercase;
  font-weight: 600;
}
.members-portal__note {
  margin-top: clamp(0.75rem, calc(1.1979 * var(--vw)), 1.4375rem); /* 23 */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-ui);
  line-height: 1.4;
  color: var(--c-charcoal);
}

/* ==========================================================================
   Your pharmacy experience
   ========================================================================== */
.members-experience {
  background: var(--c-cream);
  padding-block: clamp(2.75rem, calc(7.08 * var(--vw)), 8.496rem) clamp(3.5rem, calc(8.44 * var(--vw)), 10.128rem);
}
.members-experience__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--c-charcoal);
}
.members-experience__intro {
  max-width: var(--measure-narrow);
  margin: clamp(1rem, calc(2.71 * var(--vw)), 3.25rem) auto 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.members-experience__steps {
  max-width: var(--measure-narrow);
  margin: clamp(2.5rem, calc(6.09 * var(--vw)), 7.3125rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: clamp(2.5rem, calc(6.77 * var(--vw)), 8.125rem);
}
/* Each illustration is a fixed canvas box — 376, 447, 373 and 426 wide — not an
   image that fills its half of the row. The step passes its Figma width through
   as --art-w so one rule converts all four onto the scale (canvas / 19.2). */
.members-experience .numbered-step__art img {
  max-width: min(calc(var(--art-w) * 1px), calc(var(--art-w) / 19.2 * var(--vw-inset)));
  margin-inline: auto;
}
/* ==========================================================================
   Retail / mail-order / specialty
   ========================================================================== */
.members-pharmacies {
  background: var(--c-white);
  padding-block: clamp(2.25rem, calc(5.89 * var(--vw)), 7.068rem);
}
.members-pharmacies__inner {
  max-width: min(1332px, calc(69.375 * var(--vw-inset)));
  margin-inline: auto;
}
.members-pharmacies__heading {
  max-width: min(1302px, calc(67.8125 * var(--vw-inset)));
  margin-inline: auto;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
/* Video gallery (About Specialty Pharmacy / About Mail Order Pharmacies) —
   replaces the old 3-column retail/mail-order/specialty comparison plus its
   "Watch Explainer Video" link. Tile classes are the shared .members-video__*
   ones already styled under "Video gallery" below; only the 2-up grid here
   is specific to this section. */
.members-pharmacies__videos {
  margin: clamp(2rem, calc(4.53 * var(--vw)), 5.4375rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 428fr));
  column-gap: 3.07%; /* 42 of 1368 */
  row-gap: clamp(2rem, calc(3.13 * var(--vw)), 3.75rem);
  justify-content: center;
  max-width: 918px; /* 2 * 428 + gap, keeps tiles from over-stretching */
  margin-inline: auto;
}

/* ==========================================================================
   Member care team
   ========================================================================== */
.members-care {
  background: var(--c-cream);
  padding-block: clamp(3rem, calc(7.29 * var(--vw)), 8.748rem);
}
.members-care__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.members-care__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.members-care__line {
  display: block;
}
.members-care__intro {
  margin-top: clamp(1rem, calc(1.82 * var(--vw)), 2.1875rem);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.members-care__grid {
  margin-top: clamp(2.5rem, calc(4.79 * var(--vw)), 5.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 639fr));
  column-gap: 3.29%; /* 45 of 1368 */
  justify-content: space-between;
  align-items: stretch;
}
.members-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: min(35px, calc(1.8229 * var(--vw-inset)));
  overflow: hidden;
}
.members-card__photo {
  width: 100%;
  aspect-ratio: 639 / 390;
  object-fit: cover;
}
.members-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, calc(2.6 * var(--vw)), 3.125rem) clamp(1.5rem, calc(2.08 * var(--vw)), 2.5rem) clamp(1.75rem, calc(2.6 * var(--vw)), 3.125rem);
}
.members-card__eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  text-transform: uppercase;
  color: var(--c-blue);
}
@media (min-width: 992px) {
  .members-card__eyebrow {
    /* Reserves two lines so the summary below lines up across both cards
       even when only one eyebrow wraps. */
    min-height: calc(1.283em * 2);
  }
}
.members-card__summary {
  margin-top: clamp(0.5rem, calc(0.78 * var(--vw)), 0.9375rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.37;
  color: var(--c-charcoal);
}
.members-card__lead,
.members-card__text {
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  font-size: var(--fs-body);
  line-height: 1.79;
  color: var(--c-charcoal);
}
.members-card__points {
  margin: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: clamp(0.5rem, calc(0.99 * var(--vw)), 1.1875rem);
}
.members-card__points li {
  display: grid;
  grid-template-columns: clamp(22px, calc(1.51 * var(--vw)), 29px) minmax(0, 1fr);
  column-gap: clamp(0.5rem, calc(0.83 * var(--vw)), 1rem);
  align-items: start;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-charcoal);
}
.members-card__points img {
  width: 100%;
  height: auto;
  margin-top: 0.25em;
}
.members-card__link {
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.79;
  color: var(--c-orange);
}
.members-card__link a:hover {
  text-decoration: underline;
}
.members-care__contact {
  margin-top: auto;
  padding-top: clamp(1.5rem, calc(2.4 * var(--vw)), 2.875rem);
}
.members-care__name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.members-care__lines {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-blue);
}
.members-care__lines a {
  display: block;
}
.members-care__lines a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Video gallery
   ========================================================================== */
.members-videos {
  background: var(--c-white);
  padding-block: clamp(2.75rem, calc(6.8229 * var(--vw)), 8.1875rem) /* 131 */
    clamp(2.75rem, calc(6.7708 * var(--vw)), 8.125rem); /* 130 */
}
.members-videos__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.members-videos__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.members-videos__grid {
  margin: clamp(2rem, calc(3.13 * var(--vw)), 3.75rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 428fr));
  column-gap: 3.07%; /* 42 of 1368 */
  row-gap: clamp(2rem, calc(5.83 * var(--vw)), 7rem);
  justify-content: space-between;
}
.members-video__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 428 / 269;
  background: #d9d9d9;
  border-radius: min(25px, calc(1.3021 * var(--vw-inset)));
  overflow: hidden;
}
.members-video__poster,
.members-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.members-video__play {
  position: relative;
  width: clamp(52px, calc(4.27 * var(--vw)), 82px);
  height: auto;
  transition: transform 0.2s ease;
}
.members-video__thumb:hover .members-video__play {
  transform: scale(1.06);
}
.members-video__title a:hover {
  color: var(--c-blue);
}
.members-video__title {
  margin-top: clamp(0.5rem, calc(0.63 * var(--vw)), 0.75rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.members-video__status {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}

/* ==========================================================================
   The terms worth knowing
   ========================================================================== */
.members-terms {
  background: var(--c-ice);
  padding-block: clamp(3.25rem, calc(8.33 * var(--vw)), 9.996rem);
}
.members-terms__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.members-terms__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--c-charcoal);
}
.members-terms__intro {
  margin-top: clamp(0.75rem, calc(1.3 * var(--vw)), 1.5625rem);
  font-size: var(--fs-ui);
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.members-terms__list {
  /* The glossary rides the shared .faq-list accordion; the comp's row rule and
     padding are the same ones the FAQs use, so only the top gap is local. */
  margin-top: clamp(2rem, calc(3.44 * var(--vw)), 4.125rem);
}

/* ==========================================================================
   Connect with us faster
   ========================================================================== */
.members-connect {
  background: var(--c-navy);
  color: var(--c-white);
  padding-block: clamp(2rem, calc(4.69 * var(--vw)), 5.628rem);
  text-align: center;
}
.members-connect__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.members-connect__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.5;
}
.members-connect__body {
  margin-top: clamp(1rem, calc(1.93 * var(--vw)), 2.3125rem);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.members-connect__body p + p {
  margin-top: clamp(1rem, calc(1.15 * var(--vw)), 1.375rem);
}
.members-connect__btn {
  margin-top: clamp(1.5rem, calc(2.29 * var(--vw)), 2.75rem); /* 44 */
  /* A fixed pill in the comp, not a hug-the-label button. */
  width: min(100%, 249px, calc(12.9688 * var(--vw-inset))); /* 249 */
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Motion — scroll reveal + hover treatments
   Mirrors the home page: reveal targets open their transition list with
   var(--reveal-transition) so the scroll-in and the hover state share one
   declaration instead of the second replacing the first. See .audience-card /
   .savings-card in front-page.css for the pattern this follows.
   ========================================================================== */
.members-hero__copy,
.members-hero__art,
.members-benefits__heading,
.members-benefits__intro,
.members-explainer,
.members-benefits__note,
.members-portal__copy,
.members-portal-item,
.members-portal__cta,
.members-experience__heading,
.members-experience__intro,
.members-pharmacies__heading,
.members-care__heading,
.members-care__intro,
.members-videos__heading,
.members-terms__heading,
.members-terms__intro,
.members-terms__list,
.members-connect__heading,
.members-connect__body,
.members-connect__btn {
  transition: var(--reveal-transition);
}

/* Benefits photo — the one image-only reveal target on this page, so it opens
   on a zoom rather than a rise; see .story__image in front-page.css. */
.members-benefits__figure {
  transition: var(--reveal-transition);
}

/* Portal icons are not links, so only the icon answers the cursor — same
   restraint as .feature__icon img in front-page.css. */
.members-portal-item__icon {
  transition: transform var(--motion) ease;
}
.members-portal-item:hover .members-portal-item__icon {
  transform: scale(1.08);
}

/* Each pharmacy-experience illustration lifts a touch on its own row hover,
   same language as .feature__icon img. */
.members-experience .numbered-step {
  transition: var(--reveal-transition);
}
.members-experience .numbered-step__art img {
  transition: transform var(--motion) ease;
}
.members-experience .numbered-step:hover .numbered-step__art img {
  transform: scale(1.05);
}

/* Member care cards lift like .savings-card, with the photo zooming like
   .audience-card's media. */
.members-card {
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.members-card:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.18);
}
.members-card__photo {
  transition: transform var(--motion) ease;
}
.members-card:hover .members-card__photo {
  transform: scale(1.05);
}

/* Video tiles: the thumb itself is the card here (the title sits outside it,
   unbordered), so it is what lifts and zooms — same pattern as .audience-card. */
.members-video__thumb {
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.members-video__thumb:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.18);
}
.members-video__poster,
.members-video__media {
  transition: transform var(--motion) ease;
}
.members-video__thumb:hover .members-video__poster,
.members-video__thumb:hover .members-video__media {
  transform: scale(1.05);
}

/* A visitor who has asked for reduced motion still gets the feedback, just
   not the movement: colour, border and shadow changes stay, only what
   travels or scales is dropped. The scroll reveals are already handled at the
   source — drx_reveal_flag() never arms them. See front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .members-portal-item:hover .members-portal-item__icon,
  .members-experience .numbered-step:hover .numbered-step__art img,
  .members-card:hover,
  .members-card:hover .members-card__photo,
  .members-video__thumb:hover,
  .members-video__thumb:hover .members-video__poster,
  .members-video__thumb:hover .members-video__media {
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .members-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .members-benefits__figure {
    grid-row: auto;
    grid-column: 1 / -1;
    max-width: 420px;
  }
  .members-benefits__note {
    grid-column: 1 / -1;
  }
  .members-videos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .members-pharmacies__videos {
    gap: 2.5rem;
  }
}

@media (max-width: 991px) {
  .members-hero__inner,
  .members-portal__inner,
  .members-care__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .members-hero__art {
    width: min(100%, 372px);
    margin-inline: auto;
  }
  .members-portal__art {
    width: min(100%, 460px);
  }
  .members-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .members-portal__list,
  .members-videos__grid,
  .members-pharmacies__videos {
    grid-template-columns: minmax(0, 1fr);
  }
}