.bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 65px var(--offset-x);
}

.bottom__right {
  display: flex;
  gap: 15px;
  justify-self: end;
}

.bottom__right circle {
  transition: .2s ease-in-out;
}

.bottom__right a:hover path {
  fill: var(--paper);
}

.bottom__right a:hover circle {
  fill: var(--neutral);
}

@media screen and (max-width: 1180px) {
  .bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .bottom__left,
  .bottom__middle,
  .bottom__right {
    justify-self: center;
  }
}