.footer {
  background: var(--color-general-dark);
  color: white;  
  --color-title: white;
  overflow: hidden;

  --side-padding: 0;
}

.footer__inner {
  padding: 64px 0;
  display: grid;
  grid-template-columns: 523px 1fr 190px 190px;

  grid-template-areas:
    'title   - menu-main menu-side'
    'contact - menu-main menu-side'
    'credit  -  donation  donation';
}

.footer__title { grid-area: title }
.footer__contact { grid-area: contact }
.menu--footer-main { grid-area: menu-main }
.menu--footer-side__wrapper { grid-area: menu-side }
.donation-button { grid-area: donation }
.footer__credit { grid-area: credit }
.footer__logo { grid-area: logo }

.menu--footer-main,
.menu--footer-side__wrapper {
  place-self: start start;
}


/* Title */
.footer__title {
  border: 2px solid;
  border-left: none; border-right: none;
  padding: 13px 0;
  margin-bottom: 33px;
}

/* Contact list */
.contact-list  {
  gap: 32px;
  margin-bottom: 31px;
}

.contact-list__title {
  margin-bottom: 4px;
}

/* Credit */
.footer__credit {
  border-top: 1px solid;
  padding-top: 15px;
  font-size: var(--font-size-14);
  font-weight: 300;
  letter-spacing: 0.03em;
}

.footer__credit p {
  margin-bottom: 9px;  
}

.footer__credit a {
  font-weight: 500;
}

/* Menus */
.footer .menu-item {
  border-bottom: 2px solid;
  padding-bottom: 5px;
  margin-bottom: 17px;
}

@media (pointer: fine) {
  .footer .menu-item:hover {
    border-bottom-width: 4px;
    margin-bottom: 15px;
  }
}

/* Socials */
.socials  {
  gap: 14px;
}


/* Donation button */
.button.donation-button {
  height: auto;
  align-items: flex-start;
  background-position: right 0 bottom 8px;
  place-self: start;
  gap: 3px;
  padding-inline-end: 54px;
  margin-top: -10px;
}

@media (hover: hover) {
  .button.donation-button:hover {
    padding-inline-end: 60px;
  } 
}

.donation__main  {
  font-size: var(--font-size-48);  
}

/* Tablet */
@media (max-width: 1000px) {
 .footer__inner { 
   grid-template-columns: max-content 1fr 190px 190px
 }
 
}

/* Mobile */
@media (max-width: 767px) {
 
  .footer__inner {
    padding: 33px 0 13px;
    --side-margin: 24px;
    
    display: grid;
    grid-template-columns: max-content 1fr min-content;    
    gap: 0 60px;
  
    grid-template-areas:
      'title     title     s1'
      'contact   contact   s1 '
      'social    social    social'
      'menu-main menu-side s2'
      'donation  donation  s2'
      '-         logo      s2'
      'credit    credit    s2';
  }

  .footer__title {
    border-width: 4px;
  }

  .contact-list {
    margin-bottom: 36px;
  }

  .button.donation-button {
    place-self: start;
    margin-top: 47px;
    padding-right: 36px;
    background-position: right 0 bottom 0px;
  }

  .donation__main  {
    font-size: var(--font-size-h1);
    margin-top: 6px;
  }

  .socials {
    margin-bottom: 40px;
    grid-area: social;
    gap: 46px;
  }

  .social__image {
    transform: scale(1.2)
  }

  .menu--footer-main, .menu--footer-side__wrapper {
    place-self: start;
  }


  .footer__logo {
    place-self: end;
    margin-top: 64px;
    margin-right: 5px;
    margin-bottom: 62px;
  }   
}

@media (max-width: 400px) {
  
}