.whats-inside-section {
  padding: 18px 0 0;
  font-family: 'Inter', Arial, sans-serif;
}

.whats-inside-section .inside {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 22px 18px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 9px 35px rgba(25, 25, 25, .07);
}

.whats-inside-section .heading-accent {
  display: block;
  width: 60px;
  height: 7px;
  margin: 0 0 14px;
  background: #ff5028;
  border-radius: 99px;
}

.whats-inside-section .section-heading h2 {
  margin: 0 0 5px;
  color: #0a1020;
  font-size: clamp(30px, 4.8vw, 36px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.12;
}

.whats-inside-section .section-heading p {
  margin: 0 0 20px;
  color: #4d5369;
  font-size: 14px;
  letter-spacing: -.025em;
  line-height: 1.45;
}

.whats-inside-section .guides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.whats-inside-section .guide-card {
  display: flex;
  min-width: 0;
  min-height: 260px;
  grid-column: span 1;
  flex-direction: column;
  padding: 14px 15px 16px;
  border-radius: 16px;
}

.whats-inside-section .card-head {
  display: flex;
  flex-direction: column;
}

.whats-inside-section .card-icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  margin: 0 0 6px -3px;
  color: var(--color);
  background: var(--icon-bg);
  border-radius: 20px;
}

.whats-inside-section .card-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.whats-inside-section .card-copy h3 {
  margin: 0 0 6px;
  color: #0a1020;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.12;
}

.whats-inside-section .guide-links {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  padding: 11px 13px;
  list-style: none;
  background: var(--list-bg);
  border-radius: 14px;
}

.whats-inside-section .guide-links li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111626;
  font-size: 14px;
  letter-spacing: -.03em;
  line-height: 1.3;
}

.whats-inside-section .guide-links li::before {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  padding-bottom: 3px;
  color: #fff;
  background: var(--color);
  border-radius: 50%;
  content: '›';
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.whats-inside-section .essentials { --color: #ff4b20; --icon-bg: #ffe4d5; --list-bg: #ffebdf; background: #fff4ea; }
.whats-inside-section .pantries { --color: #00a357; --icon-bg: #dcf3e2; --list-bg: #e0f1e3; background: #eef8ef; }
.whats-inside-section .documents { --color: #0864e4; --icon-bg: #d9e8ff; --list-bg: #deebff; background: #eef5ff; }
.whats-inside-section .medical { --color: #ff4b20; --icon-bg: #ffe2cc; --list-bg: #ffebdf; background: #fff5e9; }
.whats-inside-section .housing { --color: #8421d9; --icon-bg: #ead5ff; --list-bg: #efe2ff; background: #f6efff; }
.whats-inside-section .families { --color: #ef2485; --icon-bg: #ffd9e9; --list-bg: #fcdfeb; background: #fff0f6; }
.whats-inside-section .veterans { --color: #008e89; --icon-bg: #d0f1ee; --list-bg: #dff5f2; background: #edf9f7; }

.whats-inside-section .guide-card.horizontal {
  min-height: 200px;
  padding: 13px 15px 16px;
}

.whats-inside-section .horizontal .card-head {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
}

.whats-inside-section .horizontal .card-icon {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  margin: 0;
}

.whats-inside-section .horizontal .card-icon svg {
  width: 32px;
  height: 32px;
}

.whats-inside-section .horizontal .card-copy { padding-top: 7px; }
.whats-inside-section .horizontal .guide-links { min-height: 92px; gap: 5px; margin-top: 10px; padding: 9px 12px; }

@media (hover: hover) {
  .whats-inside-section .guide-card {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .whats-inside-section .guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(28, 22, 17, .07);
  }
}

@media (max-width: 640px) {
  .whats-inside-section { padding-top: 14px; }
  .whats-inside-section .inside { padding: 21px 15px 15px; border-radius: 20px; }
  .whats-inside-section .section-heading h2 { font-size: 31px; }
  .whats-inside-section .section-heading p { margin-bottom: 17px; }
  .whats-inside-section .guides-grid { grid-template-columns: 1fr; gap: 11px; }
  .whats-inside-section .guide-card,
  .whats-inside-section .guide-card.horizontal { min-height: 0; padding: 15px; }
  .whats-inside-section .card-icon { width: 54px; height: 54px; flex-basis: 54px; border-radius: 18px; }
  .whats-inside-section .card-icon svg { width: 33px; height: 33px; }
  .whats-inside-section .card-copy h3 { font-size: 22px; }
  .whats-inside-section .guide-links { min-height: 0; margin-top: 14px; }
  .whats-inside-section .guide-links li { font-size: 15px; }
  .whats-inside-section .horizontal .card-head { gap: 10px; }
  .whats-inside-section .horizontal .card-icon { width: 48px; height: 48px; flex-basis: 48px; }
  .whats-inside-section .horizontal .card-copy { padding-top: 3px; }
  .whats-inside-section .horizontal .guide-links { min-height: 0; margin-top: 13px; }
}