.pagination {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0;
}

.pagination a,
.pagination span,
.pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.pagination a {
  color: #4a5568;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
}

.pagination a:hover {
  background: #edf2f7;
}

.pagination span {
  color: white;
  background: #4299e1;
  border: 1px solid #2b6cb0;
  font-weight: 600;
}

.pagination a[aria-current="page"] {
  background: #4299e1;
  color: white;
  border-color: #2b6cb0;
}

@media (max-width: 640px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pagination a:nth-child(2),
  .pagination a:nth-last-child(2) {
    display: inline-flex !important;
  }
  
  .pagination a:not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
    display: none;
  }
  
  .pagination a:first-child,
  .pagination a:last-child {
    min-width: auto;
    padding: 0 1rem;
  }
}