.grid {
  display: grid;
  gap: var(--space-20);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: var(--space-32);
}


.grid--pet {
  gap: var(--space-20);
  margin-bottom: var(--space-32);
}


.grid__card {
  background: var(--bg-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-20);
}

.grid__card--pet {
  display: flex;
  gap: 24px;
}

.grid__card__content {
  display: block;
  p ~ .btn {
    margin-top: 30px;
  }
}

.grid__card__image {
  display: block;
  img {
    border-radius: 8px;
  }
}

.grid.content {
  grid-template-columns: repeat(12, 1fr);
}

h3.grid__card__header {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
  margin-bottom: var(--space-4);
}

.span-12, .span-8, .span-6,.span-4, .span-3, .span-2, .span-1 {
  grid-column: span 12;
}

@media (min-width: 600px) {
  .span-12 {
    grid-column: span 12;
  }
  .span-8 {
    grid-column: span 12;
  }
  .span-6 {
    grid-column: span 6;
  }
  .span-4 {
    grid-column: span 6;
  }
  .span-3 {
    grid-column: span 4;
  }
  .span-2 {
    grid-column: span 3;
  }
  .span-1 {
    grid-column: span 3;
  }
}

@media (min-width: 1024px) {
  .span-12 {
    grid-column: span 12;
  }
  .span-8 {
    grid-column: span 8;
  }
  .span-6 {
    grid-column: span 6;
  }
  .span-4 {
    grid-column: span 4;
  }
  .span-3 {
    grid-column: span 3;
  }
  .span-2 {
    grid-column: span 2;
  }
  .span-1 {
    grid-column: span 1;
  }
  #financial-donations {
    grid-row: span 2;
  }
}

section {
  margin: 0; 
  padding: 0;
  width: 100%;
}

.content {
  margin: 0 auto; 
  max-width: 1460px;
  padding: 36px 24px;
  width: 100%;
}