/* ------------------------------------------------------------------
   Flinn Scholars recruitment page ("Apply ... for the Flinn Scholarship")
   Source design: Joenel XD, Dev Link rev 2026-09-09. Loaded only on pages
   whose content carries an "hs-scholars" class (see enqueue-scripts.php).
   Palette: navy #002e5f (headings) / #1d305f (bands, placeholders),
   green #8bc556, light green #e7f3dc, body grey #4b4b4b.
   Every selector is scoped under .hs-scholars-page (the outer group block)
   so the theme's generic heading / paragraph rules do not outrank it.
   The popup is appended to <body>, so its rules are scoped under body.
   ------------------------------------------------------------------ */

.hs-scholars-page,
.hs-scholars-page .wp-block-group,
.hs-scholars-page p,
.hs-scholars-page h1,
.hs-scholars-page h2,
.hs-scholars-page h3 {
  font-family: "Open Sans", sans-serif;
}
.hs-scholars-page .wp-block-group {
  margin: 0;
}
/* Classic theme: core/group wraps its children in an inner container div.
   Make that wrapper transparent so the grid / absolute positioning below
   applies to the real children. */
.hs-scholars-page .wp-block-group__inner-container {
  display: contents;
  max-width: none;
}
/* The two colour bands run edge to edge in the design; the theme row is
   capped at 1200px, so bleed them out to the viewport (body already hides
   horizontal overflow). */
.hs-scholars-page .hs-scholars-deadline,
.hs-scholars-page .hs-scholars-cta {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Title -------------------------------------------------------------- */
.hs-scholars-page .hs-scholars__title {
  margin: 41px auto 55px;
  padding: 0 20px;
  max-width: 1000px;
  font-size: 40px;
  line-height: 55px;
  font-weight: 700;
  color: #002e5f;
  text-align: center;
}

/* Hero headshot carousel --------------------------------------------- */
.hs-scholars-page .hs-scholars-hero {
  position: relative;
  width: 987px;
  max-width: calc(100% - 90px);
  height: 425px;
  margin: 0 auto 65px;
  border-radius: 22px;
  overflow: visible;
}
.hs-scholars-page .hs-scholars-hero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
}
.hs-scholars-page .hs-scholars-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hs-scholars-page .hs-scholars-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, #000 100%);
  opacity: 0.85;
}
.hs-scholars-page .hs-scholars-hero__track {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
}
.hs-scholars-page .hs-scholars-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.hs-scholars-page .hs-scholars-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.hs-scholars-page .hs-scholars-hero__rings {
  position: absolute;
  top: 35px;
  right: 67px;
  width: 355px;
  height: 355px;
  border-radius: 50%;
  background: rgba(213, 233, 236, 0.4);
}
.hs-scholars-page .hs-scholars-hero__rings::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: rgba(213, 233, 236, 0.35);
}
.hs-scholars-page .hs-scholars-hero__headshot {
  position: absolute;
  top: 68px;
  right: 100px;
  width: 289px;
  height: 289px;
  border-radius: 50%;
  overflow: hidden;
  background: #1d305f;
}
.hs-scholars-page .hs-scholars-hero__headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hs-scholars-page .hs-scholars-hero__label {
  position: absolute;
  left: 93px;
  top: 132px;
  padding-left: 26px;
  border-left: 7px solid #8bc556;
  min-height: 84px;
  color: #fff;
}
.hs-scholars-page .hs-scholars-hero__eyebrow {
  display: block;
  margin: 0;
  font-size: 17px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8bc556;
}
.hs-scholars-page .hs-scholars-hero__name {
  display: block;
  margin: 0;
  font-size: 40px;
  line-height: 55px;
  font-weight: 700;
  color: #fff;
}
.hs-scholars-page .hs-scholars-hero__cta {
  position: absolute;
  left: 93px;
  top: 246px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  margin: 0;
  padding: 0 24px 0 18px;
  border: 0;
  border-radius: 27px;
  background: #fff;
  color: #1d305f;
  font: 700 19px/26px "Open Sans", sans-serif;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
}
.hs-scholars-page .hs-scholars-hero__cta:hover,
.hs-scholars-page .hs-scholars-hero__cta:focus {
  background: #e7f3dc;
  color: #1d305f;
}
.hs-scholars-page .hs-scholars-hero__cta svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.hs-scholars-page .hs-scholars-hero__count {
  position: absolute;
  right: 30px;
  bottom: 25px;
  margin: 0;
  color: #fff;
  font-size: 25px;
  line-height: 34px;
  font-weight: 700;
}
.hs-scholars-page .hs-scholars-arrow,
body .hs-scholars-modal .hs-scholars-arrow {
  position: absolute;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-scholars-page .hs-scholars-arrow svg,
body .hs-scholars-modal .hs-scholars-arrow svg {
  width: 20px;
  height: 20px;
  stroke: #1d305f;
  stroke-width: 3;
  fill: none;
}
.hs-scholars-page .hs-scholars-arrow--prev {
  left: -35px;
}
.hs-scholars-page .hs-scholars-arrow--next {
  right: -35px;
}

/* Deadline band --------------------------------------------------------- */
.hs-scholars-page .hs-scholars-deadline {
  background: #1d305f;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
}
.hs-scholars-page .hs-scholars-deadline p {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  color: #fff;
  font-size: 25px;
  line-height: 34px;
  font-weight: 700;
  text-align: center;
}
.hs-scholars-page .hs-scholars-deadline p::before {
  content: "";
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zM329 305c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L329 305z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Section heading ------------------------------------------------------- */
.hs-scholars-page .hs-scholars__eyebrow {
  margin: 71px 0 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8bc556;
  text-align: center;
}
.hs-scholars-page .hs-scholars__h2 {
  margin: 8px auto 93px;
  padding: 0 20px;
  max-width: 760px;
  font-size: 35px;
  line-height: 47px;
  font-weight: 700;
  color: #002e5f;
  text-align: center;
}

/* Testimonial rows ------------------------------------------------------ */
.hs-scholars-page .hs-scholars-list {
  width: 1150px;
  max-width: 100%;
  margin: 0 auto;
}
.hs-scholars-page .hs-scholar {
  display: grid;
  grid-template-columns: 506px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 70px;
  padding: 70px 0 66px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.3);
}
.hs-scholars-page .hs-scholar:first-of-type {
  padding-top: 0;
}
.hs-scholars-page .hs-scholar:last-of-type {
  padding-bottom: 106px;
  border-bottom: 0;
}
.hs-scholars-page .hs-scholar__video {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  position: relative;
  width: 490px;
  max-width: calc(100% - 16px);
  margin: 0 0 20px 16px;
  cursor: pointer;
}
.hs-scholars-page .hs-scholar__video::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 20px;
  width: 100%;
  height: 100%;
  background: #e7f3dc;
  z-index: 0;
}
.hs-scholars-page .hs-scholar__video a,
.hs-scholars-page .hs-scholar__video img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 490 / 276;
  object-fit: cover;
  background: #1d305f;
}
.hs-scholars-page .hs-scholar__video figcaption {
  display: none;
}
.hs-scholars-page .hs-scholar__play,
body .hs-scholars-modal .hs-scholar__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
.hs-scholars-page .hs-scholar__play::after,
body .hs-scholars-modal .hs-scholar__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 16px 0 16px 28px;
  border-color: transparent transparent transparent #8bc556;
}
.hs-scholars-page .hs-scholar__headshot {
  display: none; /* only used by the hero carousel + popup */
}
.hs-scholars-page .hs-scholar__meta,
.hs-scholars-page .hs-scholar__name {
  grid-column: 2;
  padding-left: 22px;
  border-left: 5px solid #8bc556;
}
.hs-scholars-page .hs-scholar__meta,
body .hs-scholars-modal .hs-scholar__meta {
  grid-row: 1;
  margin: 0;
  padding-top: 2px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8bc556;
}
.hs-scholars-page .hs-scholar__name,
body .hs-scholars-modal .hs-scholar__name {
  grid-row: 2;
  margin: 0 0 23px;
  padding-bottom: 5px;
  font-size: 35px;
  line-height: 47px;
  font-weight: 700;
  color: #002e5f;
}
.hs-scholars-page .hs-scholar__text {
  grid-column: 2;
  grid-row: 3;
  max-width: 570px;
}
.hs-scholars-page .hs-scholar__text p,
body .hs-scholars-modal__text p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 28px;
  color: #4b4b4b;
}
.hs-scholars-page .hs-scholar__text p:last-child,
body .hs-scholars-modal__text p:last-child {
  margin-bottom: 0;
}
/* The first paragraph of each testimonial is the pull quote (bold in the design). */
.hs-scholars-page .hs-scholar__text p:first-child,
body .hs-scholars-modal__text p:first-child {
  font-weight: 700;
}

/* Apply band ------------------------------------------------------------ */
.hs-scholars-page .hs-scholars-cta {
  background: #8bc556;
  padding: 72px 20px 63px;
  text-align: center;
}
.hs-scholars-page .hs-scholars-cta h2 {
  margin: 0 0 24px;
  font-size: 35px;
  line-height: 47px;
  font-weight: 700;
  color: #fff;
}
.hs-scholars-page .hs-scholars-cta p {
  max-width: 714px;
  margin: 0 auto 45px;
  font-size: 22px;
  line-height: 32px;
  color: #fff;
}
.hs-scholars-page .hs-scholars-cta .wp-block-buttons {
  justify-content: center;
}
.hs-scholars-page .hs-scholars-cta .wp-block-button__link {
  display: inline-block;
  min-width: 293px;
  margin: 0;
  padding: 9px 24px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #8bc556;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
}
.hs-scholars-page .hs-scholars-cta .wp-block-button__link:hover,
.hs-scholars-page .hs-scholars-cta .wp-block-button__link:focus {
  background: #002e5f;
  color: #fff;
}

/* Popup (appended to body by flinn-scholars.js) --------------------------- */
body .hs-scholars-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  font-family: "Open Sans", sans-serif;
}
body .hs-scholars-modal.is-open {
  display: flex;
}
body.hs-scholars-modal-open {
  overflow: hidden;
}
body .hs-scholars-modal__box {
  position: relative;
  width: 825px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #fff;
  border: 1px solid #707070;
  padding: 36px 43px 35px;
  box-sizing: border-box;
}
body .hs-scholars-modal__media {
  position: relative;
  width: 100%;
  aspect-ratio: 739 / 417;
  background: #1d305f;
  overflow: hidden;
}
body .hs-scholars-modal__media img,
body .hs-scholars-modal__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
body .hs-scholars-modal__media .hs-scholar__play {
  pointer-events: auto;
  cursor: pointer;
}
body .hs-scholars-modal__media.is-pending .hs-scholar__play {
  opacity: 0.45;
  cursor: default;
}
body .hs-scholars-modal__label {
  margin-top: 27px;
  padding-left: 22px;
  border-left: 5px solid #8bc556;
}
body .hs-scholars-modal__label .hs-scholar__meta,
body .hs-scholars-modal__label .hs-scholar__name {
  padding-left: 0;
  border-left: 0;
  margin: 0;
}
body .hs-scholars-modal__label .hs-scholar__name {
  font-family: "Open Sans", sans-serif;
}
body .hs-scholars-modal__text {
  margin-top: 23px;
}
body .hs-scholars-modal__pending {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 24px;
  color: #8bc556;
  font-weight: 700;
}
body .hs-scholars-modal .hs-scholars-arrow {
  position: fixed;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
body .hs-scholars-modal .hs-scholars-arrow svg {
  stroke: #fff;
}
body .hs-scholars-modal .hs-scholars-arrow--prev {
  left: calc(50% - 412px - 130px);
}
body .hs-scholars-modal .hs-scholars-arrow--next {
  right: calc(50% - 412px - 130px);
}
body .hs-scholars-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1d305f;
  font-size: 26px;
  line-height: 36px;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1240px) {
  .hs-scholars-page .hs-scholar {
    grid-template-columns: minmax(0, 46%) 1fr;
    column-gap: 40px;
  }
  .hs-scholars-page .hs-scholar__video {
    width: auto;
  }
  body .hs-scholars-modal .hs-scholars-arrow--prev {
    left: 10px;
  }
  body .hs-scholars-modal .hs-scholars-arrow--next {
    right: 10px;
  }
}
@media (max-width: 1100px) {
  .hs-scholars-page .hs-scholars-hero__rings {
    display: none;
  }
  .hs-scholars-page .hs-scholars-hero__headshot {
    top: 50%;
    right: 60px;
    width: 240px;
    height: 240px;
    margin-top: -120px;
  }
  .hs-scholars-page .hs-scholars-hero__label,
  .hs-scholars-page .hs-scholars-hero__cta {
    left: 60px;
  }
}
@media (max-width: 782px) {
  .hs-scholars-page .hs-scholars__title {
    margin: 30px auto 30px;
    font-size: 30px;
    line-height: 40px;
  }
  .hs-scholars-page .hs-scholars-hero {
    height: auto;
    min-height: 560px;
    max-width: calc(100% - 40px);
    margin-bottom: 40px;
  }
  .hs-scholars-page .hs-scholars-hero__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 70px;
    text-align: center;
  }
  .hs-scholars-page .hs-scholars-hero__headshot {
    position: static;
    width: 200px;
    height: 200px;
    margin: 0 0 24px;
  }
  .hs-scholars-page .hs-scholars-hero__label,
  .hs-scholars-page .hs-scholars-hero__cta {
    position: static;
    left: auto;
    top: auto;
  }
  .hs-scholars-page .hs-scholars-hero__label {
    border-left: 0;
    padding-left: 0;
    min-height: 0;
    margin-bottom: 20px;
  }
  .hs-scholars-page .hs-scholars-hero__name {
    font-size: 30px;
    line-height: 40px;
  }
  .hs-scholars-page .hs-scholars-hero__cta {
    white-space: nowrap;
    font-size: 17px;
    padding: 0 18px 0 14px;
  }
  .hs-scholars-page .hs-scholars-hero__count {
    right: 20px;
    bottom: 18px;
    font-size: 18px;
    line-height: 24px;
  }
  .hs-scholars-page .hs-scholars-arrow {
    width: 50px;
    height: 50px;
    margin-top: -25px;
  }
  .hs-scholars-page .hs-scholars-arrow--prev {
    left: -20px;
  }
  .hs-scholars-page .hs-scholars-arrow--next {
    right: -20px;
  }
  .hs-scholars-page .hs-scholars-deadline p {
    font-size: 18px;
    line-height: 26px;
    gap: 12px;
  }
  .hs-scholars-page .hs-scholars-deadline p::before {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .hs-scholars-page .hs-scholars__eyebrow {
    margin-top: 40px;
  }
  .hs-scholars-page .hs-scholars__h2 {
    margin-bottom: 40px;
    font-size: 28px;
    line-height: 38px;
  }
  .hs-scholars-page .hs-scholar {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 40px 0;
  }
  .hs-scholars-page .hs-scholar:last-of-type {
    padding-bottom: 60px;
  }
  .hs-scholars-page .hs-scholar__video {
    grid-column: 1;
    grid-row: auto;
    margin: 0 0 40px 16px;
  }
  .hs-scholars-page .hs-scholar__meta,
  .hs-scholars-page .hs-scholar__name,
  .hs-scholars-page .hs-scholar__text {
    grid-column: 1;
    grid-row: auto;
  }
  .hs-scholars-page .hs-scholar__name {
    font-size: 28px;
    line-height: 38px;
  }
  .hs-scholars-page .hs-scholars-cta {
    padding: 48px 20px 48px;
  }
  .hs-scholars-page .hs-scholars-cta h2 {
    font-size: 28px;
    line-height: 38px;
  }
  .hs-scholars-page .hs-scholars-cta p {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 32px;
  }
  body .hs-scholars-modal {
    padding: 12px;
  }
  body .hs-scholars-modal__box {
    padding: 20px 20px 84px;
    max-height: calc(100vh - 24px);
  }
  body .hs-scholars-modal .hs-scholars-arrow {
    position: absolute;
    top: auto;
    bottom: 12px;
    margin-top: 0;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.85);
  }
  body .hs-scholars-modal .hs-scholars-arrow svg {
    stroke: #1d305f;
  }
  body .hs-scholars-modal .hs-scholars-arrow--prev {
    left: 12px;
  }
  body .hs-scholars-modal .hs-scholars-arrow--next {
    right: 12px;
  }
}

/* hs-scholars-banner-apply-20260912 ---------------------------------------
   Copy of the Apply button inside the blue deadline banner above the videos
   (client request via Brooke, 2026-09-11). Same treatment as the green CTA
   band's button so the two read as one control. */
.hs-scholars-page .hs-scholars-deadline {
  flex-wrap: wrap;
  gap: 34px;
}
.hs-scholars-page .hs-scholars-deadline .wp-block-buttons {
  margin: 0;
  justify-content: center;
}
.hs-scholars-page .hs-scholars-deadline .wp-block-button {
  margin: 0;
}
.hs-scholars-page .hs-scholars-deadline .wp-block-button__link {
  display: inline-block;
  min-width: 293px;
  margin: 0;
  padding: 9px 24px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #1d305f;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}
.hs-scholars-page .hs-scholars-deadline .wp-block-button__link:hover,
.hs-scholars-page .hs-scholars-deadline .wp-block-button__link:focus {
  background: #8bc556;
  color: #fff;
}
@media (max-width: 1100px) {
  .hs-scholars-page .hs-scholars-deadline {
    flex-direction: column;
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
}
@media (max-width: 782px) {
  .hs-scholars-page .hs-scholars-deadline .wp-block-button__link {
    min-width: 0;
    width: 100%;
    max-width: 320px;
  }
}

/* hs-scholars-editor-headshot-20261020 ------------------------------------
   Block editor only. Each row's headshot block feeds the rotating card at the
   top of the page, so it stays hidden inside the row on the front end. The
   block editor adds .block-editor-block-list__block to every block, so these
   rules show it there (small and labelled, under the video) where it can be
   clicked and replaced. Nothing below can match on the front end. */
.hs-scholars-page .hs-scholar__headshot.block-editor-block-list__block {
  display: block;
  grid-column: 1;
  grid-row: 4;
  width: 180px;
  max-width: 100%;
  margin: 20px 0 0;
  padding: 10px;
  border: 2px dashed #8bc556;
  border-radius: 8px;
  background: #fff;
}
.hs-scholars-page .hs-scholar__headshot.block-editor-block-list__block::before {
  content: "Headshot for the top carousel";
  display: block;
  margin: 0 0 8px;
  color: #1d305f;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}
.hs-scholars-page .hs-scholar__headshot.block-editor-block-list__block img {
  display: block;
  width: 140px;
  height: 140px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 782px) {
  .hs-scholars-page .hs-scholar__headshot.block-editor-block-list__block {
    grid-row: auto;
  }
}