:root {
  --highlight: #dcaa72;
}

body {
  background-image: url('./../images/base/bg-gray.png');
  background-color: #000000;
}

.main-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.main-content h1 {
  margin: 2rem 0 2rem 0;
  color: var(--highlight);
}

.logos-container {
  min-width: 30%;
  margin: 6rem 0;
}

.logos-container a {
  display: block;
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 2rem;
}

.logos-container a.facebook {
  background-image: url('./../images/logos/facebook-logo-white.png');
}

.logos-container a.facebook:hover {
  background-image: url('./../images/logos/facebook-logo-color.png');
}

.logos-container a.instagram {
  background-image: url('./../images/logos/instagram-logo-white.png');
}

.logos-container a.instagram:hover {
  background-image: url('./../images/logos/instagram-logo-color.png');
}

.logos-container a.youtube {
  background-image: url('./../images/logos/youtube-logo-white.png');
}

.logos-container a.youtube:hover {
  background-image: url('./../images/logos/youtube-logo-color.png');
}

.logos-container a.spotify {
  background-image: url('./../images/logos/spotify-logo-white.png');
}

.logos-container a.spotify:hover {
  background-image: url('./../images/logos/spotify-logo-color.png');
}

.logos-container a.bandcamp {
  background-image: url('./../images/logos/bandcamp-logo-white.png');
}

.logos-container a.bandcamp:hover {
  background-image: url('./../images/logos/bandcamp-logo-color.png');
}

.logos-container a.itunes {
  background-image: url('./../images/logos/itunes-logo-white.png');
}

.logos-container a.itunes:hover {
  background-image: url('./../images/logos/itunes-logo-color.png');
}

@media (max-width:840px) {
  .logos-container {
    margin: 2rem 0;
  }

  .logos-container h1 {
    margin: 1.5rem 0;
  }
}

@media (max-width:740px) {
  .main-content {
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 2rem;
  }

  .logos-container {
    margin: 0;
  }

  .logos-container h1 {
    margin: 1rem 0;
  }

  .logos-container a {
    margin: 0 0 1rem 0;
  }
}