/* Home page sections added in the November 2026 rework. Uses the brand
   variables from lunchassist.webflow.css. */

.home-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.home-hero-ctas.center {
  justify-content: center;
}

.home-link-button {
  color: var(--colours--dark-teal);
  border-bottom: 2px solid var(--colours--lime-green);
  padding-bottom: 2px;
  font-weight: 600;
  text-decoration: none;
}

.home-link-button:hover {
  border-bottom-color: var(--colours--main-green);
}

.home-section {
  padding-top: var(--space--main-v-padding);
  padding-bottom: var(--space--main-v-padding);
}

.home-section.beige {
  background-color: var(--colours--lightest-background);
}

.home-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.home-eyebrow {
  color: var(--colours--main-green);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .75rem;
  font-size: .875rem;
  font-weight: 700;
}

.home-eyebrow.light {
  color: var(--colours--lime-green);
}

.home-lede {
  color: var(--colours--dark-text);
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Stats bar under the district logos */
.home-stats {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.home-stat {
  text-align: center;
  border-left: 1px solid #e2e2e2;
  padding: 0 1rem;
}

.home-stat:first-child {
  border-left: 0;
}

.home-stat-number {
  color: var(--colours--main-green);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.home-stat-label {
  color: var(--colours--dark-text);
  margin-top: .5rem;
  font-size: 1rem;
  line-height: 1.4;
}

/* Team expertise */
.home-team {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 4rem;
  width: 100%;
}

.home-avatars {
  display: flex;
  margin: 1.75rem 0 1.25rem;
}

.home-avatar {
  object-fit: cover;
  object-position: 50% 20%;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  margin-left: -12px;
}

.home-avatar:first-child {
  margin-left: 0;
}

.home-team-points {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-point {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: var(--colours--lightest-background);
  border-radius: var(--radius--reg-corners);
  padding: 1.5rem;
}

.home-point strong {
  color: var(--colours--dark-teal);
  font-size: 1.125rem;
}

.home-point p {
  margin: .35rem 0 0;
}

.home-point-number {
  color: var(--la-orange-text);
  flex: 0 0 3.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

/* Offer cards and "find the right fit" cards */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.home-card,
.home-path {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: var(--radius--reg-corners);
  padding: 2rem;
}

.home-tag {
  align-self: flex-start;
  color: var(--colours--main-green);
  background-color: var(--colours--light-green);
  border-radius: 999px;
  margin-bottom: 1rem;
  padding: .25rem .75rem;
  font-size: .8125rem;
  font-weight: 700;
}

.home-card-title {
  color: var(--colours--dark-teal);
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.home-card-lede {
  margin-bottom: 1rem;
}

.home-checks {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.home-checks li {
  position: relative;
  margin-bottom: .6rem;
  padding-left: 1.75rem;
  line-height: 1.5;
}

.home-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1rem;
  height: .55rem;
  border-left: 2.5px solid var(--colours--main-green);
  border-bottom: 2.5px solid var(--colours--main-green);
  transform: rotate(-45deg);
}

.home-checks.light li::before {
  border-color: var(--colours--lime-green);
}

.home-card-note {
  color: #6b6560;
  margin: -.5rem 0 1rem;
  font-size: .875rem;
}

.home-card-link {
  color: var(--colours--main-green);
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
}

.home-card-link:hover {
  text-decoration: underline;
}

.home-path-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: auto;
}

.home-path p {
  margin-bottom: 1.25rem;
}

/* Built for California band */
.home-ca {
  color: #fff;
  background-color: var(--colours--dark-teal);
  padding-top: var(--space--double-vspace);
  padding-bottom: var(--space--double-vspace);
}

.home-ca .heading-4 {
  color: #fff;
  margin-bottom: 1.5rem;
}

.home-ca-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 4rem;
  width: 100%;
}

.home-ca .home-checks {
  margin-bottom: 2rem;
}

.home-ca .home-checks strong {
  color: var(--colours--lemon-yellow);
}

.home-ca-image img {
  object-fit: cover;
  border-radius: var(--radius--large-corners);
  width: 100%;
  height: 100%;
  max-height: 520px;
}

/* Closing call to action */
.home-cta {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background-color: var(--colours--light-green);
  border-radius: var(--radius--large-corners);
  padding: 3.5rem 2rem;
}

.home-cta .home-lede {
  margin-bottom: 2rem;
}

@media screen and (max-width: 991px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-team,
  .home-ca-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }

  .home-stat:nth-child(3) {
    border-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-section {
    padding-top: var(--space--mobile-v-padding);
    padding-bottom: var(--space--mobile-v-padding);
  }

  .home-ca {
    padding-top: var(--space--mobile-v-padding);
    padding-bottom: var(--space--mobile-v-padding);
  }

  .home-stat-number {
    font-size: 2.25rem;
  }

  .home-card,
  .home-path {
    padding: 1.5rem;
  }
}

/* Hero: the longer headline needs a smaller size than the original. */
.header .heading-2 {
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 1.02;
}

.home-hero-ctas > a {
  flex: none;
}

.home-card-lede,
.home-path p {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.home-checks li {
  font-size: 1rem;
}

.home-ca .home-checks li {
  font-size: 1.0625rem;
}

.header .home-hero-ctas {
  width: 100%;
}

/* Hero photo of Jen: a tight cutout, so size it by width and keep it inside the page. */
@media screen and (min-width: 992px) {
  .header .hero-image-wrapper {
    right: 2vw;
  }

  /* Fit the hero's height (81dvh, at least 34rem) below the 7rem nav, and never wider than 40vw. */
  .header .main-image {
    width: auto;
    height: min(calc(max(81dvh, 34rem) - 7rem), 620px);
    min-height: 0;
    max-width: 40vw;
    object-fit: contain;
    object-position: 50% 100%;
  }
}

/* Hero headline: a little more air between lines and balanced line breaks. */
.header .heading-2 {
  font-size: clamp(2.5rem, 4.1vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* Floating product cards around the hero photo (desktop only; decorative).
   They sit in the empty space beside Jen's head: the left third and the right
   fifth of the photo are clear down to about halfway. */
.hero-chip {
  display: none;
}

@media screen and (min-width: 992px) {
  .hero-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 11.25rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 60, 63, .14), 0 2px 6px rgba(31, 60, 63, .08);
    padding: .6rem .8rem;
    color: var(--colours--dark-teal);
    font-size: .75rem;
    line-height: 1.35;
    animation: hero-chip-float 6s ease-in-out infinite;
  }

  /* A column of cards to the right of the photo; the photo shifts left to make room. */
  .header .hero-image-wrapper {
    right: calc(11.25rem + 1.25rem);
  }

  /* Keep the photo clear of the text column now that it sits further left. */
  .header .main-image {
    max-width: calc(46vw - 13rem);
  }

  .hero-chip-sidekick,
  .hero-chip-hours,
  .hero-chip-consulting {
    left: calc(100% + 1.25rem);
  }

  .hero-chip-sidekick {
    top: 18%;
  }

  .hero-chip-hours {
    top: calc(18% + 4.6rem);
    animation-delay: -4s;
  }

  .hero-chip-consulting {
    top: calc(18% + 9.4rem);
    animation-delay: -2s;
  }

  .hero-chip-label {
    color: var(--colours--main-green);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .625rem;
    font-weight: 700;
  }

  .hero-chip-title {
    font-size: .875rem;
    font-weight: 700;
  }

  .hero-chip-sub {
    color: #6b6560;
  }

  .hero-chip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }

  .hero-chip-label,
  .hero-chip-pill,
  .hero-chip-row .hero-chip-title,
  .hero-chip-row .hero-chip-sub {
    white-space: nowrap;
  }

  .hero-chip-pill {
    color: #fff;
    background-color: var(--colours--main-orange);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
  }

  .hero-chip-dot {
    flex: none;
    width: .6rem;
    height: .6rem;
    background-color: var(--colours--main-orange);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(229, 142, 26, .2);
  }

  .hero-chip-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background-color: var(--colours--bright-green);
    border-radius: 50%;
  }

  .hero-chip-bar {
    overflow: hidden;
    height: .375rem;
    background-color: var(--colours--light-green);
    border-radius: 999px;
  }

  .hero-chip-bar span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--colours--main-green);
    border-radius: 999px;
  }

  .hero-chip-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: #fff;
    background-color: var(--colours--main-green);
    border-radius: 50%;
    font-size: .625rem;
    font-weight: 700;
  }
}

/* 992-1099px: compact cards so the photo, text and card column still fit side by side. */
@media screen and (min-width: 992px) and (max-width: 1099px) {
  .header .hero-image-wrapper {
    right: calc(9.75rem + 1rem);
  }

  .header .main-image {
    max-width: calc(46vw - 11rem);
  }

  .hero-chip-sidekick,
  .hero-chip-hours,
  .hero-chip-consulting {
    left: calc(100% + 1rem);
  }

  .hero-chip {
    width: 9.75rem;
    padding: .5rem .65rem;
  }

  .hero-chip-label {
    font-size: .5625rem;
  }

  .hero-chip-title {
    font-size: .75rem;
  }

  .hero-chip-pill {
    font-size: .625rem;
  }

  .hero-chip-hours {
    top: calc(18% + 4rem);
  }

  .hero-chip-consulting {
    top: calc(18% + 8.2rem);
  }
}

@keyframes hero-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chip {
    animation: none;
  }
}

/* Line breaks that only make sense when the hero copy has room for long lines. */
@media screen and (max-width: 991px) {
  .home-br-wide {
    display: none;
  }
}

/* The hero container is centred and sizes to its content; pin it to the full width
   so short, hand-broken lines don't let it shrink and drift toward the centre. */
.header .centered-content {
  width: 100%;
}

/* Team section heading: smaller than the default section heading so it sits on two lines. */
.home-team-title {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  letter-spacing: -.03em;
}

.home-nerds {
  color: var(--colours--main-green);
  font-weight: 700;
}

/* Team section: tighter points so the right column doesn't outgrow the left. */
.home-team {
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.home-team-points {
  gap: .75rem;
}

.home-point {
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.home-point strong {
  font-size: 1.0625rem;
}

.home-point p {
  margin-top: .2rem;
  font-size: 1rem;
  line-height: 1.5;
}

.home-point-number {
  flex-basis: 3rem;
  font-size: 2.25rem;
}

@media screen and (max-width: 991px) {
  .home-team {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Section headings with longer wording: same size as the team heading, room for two lines. */
.home-section-title {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  letter-spacing: -.03em;
  text-wrap: balance;
}

.home-head:has(.home-section-title) {
  max-width: 980px;
}

.home-head .home-lede {
  margin-top: .75rem;
}

@media screen and (max-width: 767px) {
  .home-section-title,
  .home-team-title {
    font-size: 1.875rem;
    line-height: 1.15;
  }
}

@media screen and (max-width: 1099px) {
  .home-head .home-br-wide {
    display: none;
  }
}

/* Team photo (replaces the old "Find the right fit" cards). */
.home-team-photo {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.home-team-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius--large-corners);
}

.home-team-photo figcaption {
  margin-top: 1.25rem;
  font-size: 1.125rem;
}

/* Founder story: closer to the other home sections in size. */
.section-jen {
  padding-top: var(--space--main-v-padding);
  padding-bottom: var(--space--main-v-padding);
}

.section-jen .centered-content {
  grid-row-gap: 2rem;
  row-gap: 2rem;
}

.section-jen .heading-4 {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  letter-spacing: -.03em;
}

.section-jen .image-2 {
  max-width: 400px;
}

.section-jen .image-2 img {
  width: 100%;
  height: auto;
}

.section-jen .paragraph-2 {
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .section-jen .content-2 {
    flex: 1;
    height: auto;
    justify-content: flex-start;
    gap: 1.5rem;
    padding-left: 3rem;
    padding-right: 0;
    padding-bottom: 0;
  }

  .section-jen .text-14 {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .section-jen .image-2 {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Judy's quote: smaller, with a real LunchAssist photo. */
.section-feature ._5050-section-red {
  min-height: 0;
}

.section-feature .image-col {
  max-height: 480px;
  overflow: hidden;
}

.section-feature ._5050-image {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: 30% 30%;
}

.section-feature .content-col {
  padding: 3rem 3.5rem;
}

.section-feature .content-col .inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Photo fills the full height of the quote panel. */
.section-feature ._5050-section-red {
  align-items: stretch;
}

@media screen and (min-width: 768px) {
  .section-feature .image-col {
    max-height: none;
  }

  .section-feature ._5050-image {
    max-height: none;
  }
}

.section-feature .heading-feature {
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.005em;
  margin-bottom: 1.75rem;
}

/* Attribution: name in bold, title and district on its own line below. */
.section-feature .tag {
  align-items: flex-start;
}

.section-feature .feature-attrib {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.section-feature .feature-attrib strong {
  font-size: 1.0625rem;
  font-weight: 700;
}

.section-feature .feature-attrib span {
  font-weight: 400;
  opacity: .85;
}

@media screen and (max-width: 767px) {
  .section-feature .image-col {
    display: block;
    width: 100%;
    max-height: none;
  }

  .section-feature ._5050-image {
    position: static;
    height: 280px;
    max-height: none;
  }

  .section-feature .content-col {
    padding: 2rem 1.5rem;
  }
}

@media screen and (max-width: 1023px) {
  .hero-copy .home-br-wide {
    display: none;
  }
}

/* Handwritten note to the left of the closing box, arrow pointing at "Book a call". */
.home-cta {
  position: relative;
  max-width: 720px;
}

.home-cta-note {
  position: absolute;
  right: calc(100% - 4.5rem);
  bottom: 6.4rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  color: var(--colours--main-green);
  font-family: Caveat, "Bradley Hand", "Segoe Print", cursive;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}

.home-cta-note span {
  order: -1;
  transform: rotate(-4deg);
}

.home-cta-note svg {
  margin-top: 1.55rem;
}

/* Narrower screens: no room beside the box, so the note sits centred just below it, no arrow. */
@media screen and (max-width: 1279px) {
  .home-cta-note {
    position: static;
    justify-content: center;
    margin-top: 1rem;
    text-align: center;
    white-space: normal;
  }

  .home-cta-note span {
    transform: rotate(-2deg);
  }

  .home-cta-note svg {
    display: none;
  }
}

/* Stats bar: five numbers ("3 million kids" leads). */
.home-stats-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.home-stat-number {
  white-space: nowrap;
}

@media screen and (max-width: 1199px) {
  .home-stat-number {
    font-size: 2.25rem;
  }
}

/* Tablets and phones: "3 million" on its own row, then two by two. */
@media screen and (max-width: 991px) {
  .home-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-stat:first-child {
    grid-column: 1 / -1;
  }

  .home-stat:nth-child(3) {
    border-left: 1px solid #e2e2e2;
  }

  .home-stat:nth-child(2),
  .home-stat:nth-child(4) {
    border-left: 0;
  }
}

/* "School Lunch NeRD" conference sticker stuck on the corner of the team photo. */
.home-team-photo {
  position: relative;
}

.home-team-photo img.home-sticker {
  position: absolute;
  top: -1.75rem;
  right: -1rem;
  z-index: 1;
  width: 140px;
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2)) drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
  transform: rotate(13deg);
}

@media screen and (max-width: 1279px) {
  .home-team-photo img.home-sticker {
    right: .75rem;
  }
}

@media screen and (max-width: 767px) {
  .home-team-photo img.home-sticker {
    top: -3.5rem;
    right: .25rem;
    width: 72px;
  }
}

/* "Made for the way California programs run" band: rounded corners like the Judi quote section. */
.home-ca {
  border-radius: 16px;
  overflow: hidden;
}

/* Accessibility: the attribution on the orange quote card needs 4.5:1. */
.feature-attrib,
.feature-attrib span,
.feature-attrib strong {
  color: #3d1508;
}

/* Client logo marquee: contained, pausable (WCAG 2.2.2), still for reduced motion. */
.logos-marquee {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.logos-marquee.is-paused .logo-animate,
.logos-marquee.is-paused .logo-animate-alt,
.logos-marquee:hover .logo-animate,
.logos-marquee:hover .logo-animate-alt,
.logos-marquee:focus-within .logo-animate,
.logos-marquee:focus-within .logo-animate-alt {
  animation-play-state: paused;
}

.marquee-toggle {
  position: absolute;
  top: .25rem;
  right: .5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid #d9dcda;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .92);
  color: var(--colours--dark-teal);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

/* Keyboard users only (Suraj, LA-569): visually hidden, but still tabbable
   and announced, until it has keyboard focus; then the rule above shows it
   where it was. Mouse visitors pause the marquee by hovering it. Once the
   strip is paused, the control stays visible ("Play logos"), so a paused
   strip can always be restarted, by mouse too. Sighted touch visitors have
   no pause control: the accepted trade-off of this choice. */
.logos-marquee:not(.is-paused) .marquee-toggle:not(:focus-visible) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.marquee-toggle-icon {
  width: .55rem;
  height: .65rem;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.logos-marquee.is-paused .marquee-toggle-icon {
  width: 0;
  height: 0;
  border-top: .35rem solid transparent;
  border-bottom: .35rem solid transparent;
  border-left: .55rem solid currentColor;
  border-right: 0;
}

/* Touch screens (hover: none) get the reduced-motion treatment too (Suraj,
   LA-569): they can't hover to pause and don't see the pill, so the logos
   stand still. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .logo-animate,
  .logo-animate-alt {
    animation: none !important;
  }

  .marquee-toggle {
    display: none;
  }

  /* A still strip built for scrolling shows only two logos on a phone, so
     the first strip wraps into a centred grid, its aria-hidden copies (there
     for the seamless loop) are hidden, and so are the edge fades (there to
     soften logos scrolling in and out), which would wash out row ends. */
  .logos-marquee .home-logo-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }

  .logos-marquee .clients-grid.logo-animate {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
  }

  .logos-marquee .clients-grid.logo-animate[aria-hidden="true"],
  .logos-marquee .home-logo-left-gradient {
    display: none;
  }

  /* On phones the logos shrink so two or three share a row instead of
     stacking one per row. */
  @media (max-width: 767px) {
    .logos-marquee .clients-grid.logo-animate {
      gap: 1.25rem 1.75rem;
    }

    .logos-marquee .clients-grid.logo-animate img {
      width: auto;
      max-height: 2.75rem;
    }
  }
}

/* 320px phones: the overlapping team avatars wrap instead of running off screen. */
@media screen and (max-width: 360px) {
  .home-avatars {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .home-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }
}