.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
}

.authenticated {
  grid-column: 1/13;
}

.tokens {
  grid-column: 1/13;
}

.active_tokens {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.active_tokens .active_token:not(:last-child) {
  margin-bottom: 0.5rem;
}
.active_tokens .active_token {
  border-radius: 0.4rem;
  grid-column: 1/13;
  display: grid;
  grid-template-columns: 3fr 3fr 1fr;
  row-gap: 0.5rem;
  grid-template-areas:
    "active_token_created active_token_expires active_token_kill"
    "active_token_ip_address active_token_user_agent active_token_user_agent"
    "active_token_token active_token_token active_token_token";
  background-color: var(--secondary-background-color);
  padding: 0.5rem;
}
.active_token .active_token_created {
  grid-area: active_token_created;
}
.active_token .active_token_expires {
  grid-area: active_token_expires;
}
.active_token .active_token_ip_address {
  grid-area: active_token_ip_address;
}
.active_token .active_token_user_agent {
  grid-area: active_token_user_agent;
}
.active_token .active_token_token {
  grid-area: active_token_token;
  word-wrap: break-word;
}
.active_token .active_token_kill {
  grid-area: active_token_kill;
  justify-self: end;
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
  .authenticated {
    grid-column: 1/5;
  }
  .tokens {
    grid-column: 5/13;
  }
}

@media only screen and (min-width: 1280px) {
  .authenticated {
    grid-column: 1/4;
  }
  .tokens {
    grid-column: 4/13;
  }
}

@media only screen and (min-width: 1580px) {
  .authenticated {
    grid-column: 1/3;
  }
  .tokens {
    grid-column: 3/13;
  }
}