html,body {
  background: #ccb29b;
}

* { padding: 0; margin: 0; box-sizing: content-box; }

header {
  grid-area: header;
}

.container {
  width:  70%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 30% 30% 40%;
  grid-template-rows: auto;

  grid-template-areas:
    "header header header"
    "social social dactyl"
    "social social dactyl";
}

.visually-hidden {
  position: absolute !important;
  height:   1px;
  width:    1px;
  overflow: hidden;
  clip:     rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

section.durradactyl {
  grid-area: dactyl;
  z-index: 0;
  margin:  -35% 0 0 -35%;
}

.social-media {
  grid-area: social;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows:    35% 15% 15% 35%;
  grid-template-areas:
    ".      ."
    "twitch discord"
    "twitter reddit"
    ".       .";
  align-content: center;
  grid-gap: 15px;
  z-index: 1;
}

.social-link {
  display:    block;
  background-repeat: no-repeat;
  background-size: contain;
}

.social-reddit {
  grid-area: reddit;
}

.social-twitch {
  grid-area: twitch;
}

.social-discord {
  grid-area: discord;
}

.social-twitter {
  grid-area: twitter;
}

@media (min-width: 1279px) {
  section.durradactyl {
    margin: -20% 0 0 -20%;
  }
}

@media (min-width: 1023px) {
  .container {
    width: 85%;
  }

  section.durradactyl {
    margin: -15% 0 0 -15%;
  }
}

@media (max-width: 667px) {
  .container {
    width: 100%;

    grid-template-columns: 50% 50%;
    grid-template-areas:
      "header header"
      "social dactyl";
  }

  section.durradactyl {
    margin: -12% 0 0 -12%;
  }

  .social-media {
    margin-top: 10%;

    grid-template-columns: 100%;
    grid-template-rows:    auto;
    grid-template-areas:
      "twitch"
      "discord"
      "twitter"
      "reddit";
  }
}