.header {
  background: #ffffff;
}

.header-wrapper {
  padding: 30px 2.5rem;
}

.logo-title,
.navigation-link {
  color: var(--header-gray);
}

.logo:hover > .logo-title,
.logo:hover > .logo-subtitle {
  text-shadow: 0 0 3px var(--orange-border);
}

.navigation-link:hover,
.active-page > .navigation-link,
.logo-subtitle {
  color: var(--text-black);
}

.nav {
  margin-bottom: 0;
}

.pets-wrapper {
  position: relative;
}

.allpets {
  max-width: 100%;

  flex-wrap: wrap;
  gap: 30px 2.5rem;
  justify-content: center;
}

.pagination-container {
  display: flex;
  justify-content: center;
  column-gap: 20px;
}

.pagination-current,
.pagination-current:hover {
  background-color: var(--orange-border);
  border-color: var(--orange-border);
}

@media only screen and (max-width: 768px) {
  .header-wrapper {
    padding: 30px;
  }

  .burger-menu {
    border-top: solid 2px #000000;
    border-bottom: solid 2px #000000;
    background: linear-gradient(transparent 45%, #000000 45%, #000000 55%, transparent 55%);
  }

  .burger-menu.clicked {
    border-top: solid 2px var(--orange-border);
    border-bottom: solid 2px var(--orange-border);
    background: linear-gradient(transparent 45%, var(--orange-border) 45%, var(--orange-border) 55%, transparent 55%);
  }

  .pets-wrapper {
    padding-bottom: 78px;
    row-gap: 30px;
  }

  .allpets {
    padding-bottom: 11px;
  }
}

@media only screen and (max-width: 360px) {
  .header-wrapper {
    padding: 30px 20px;
  }

  .nav {
    padding: 0;
  }

  .pets-wrapper {
    row-gap: 42px;
    padding-bottom: 44px;
  }

  .allpets {
    padding-bottom: 0px;
  }

  .pagination-container {
    column-gap: 10px;
  }
}