.container {
  &.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;

    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--color-heading);
      line-height: 1.8;

      a {
        color: var(--color);
        font-weight: 500;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-color: var(--color);
        text-underline-offset: 0.1875rem;
        transition: color 240ms var(--ease-fluid);

        &:focus,
        &:hover {
          color: var(--color-display);
        }
      }
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;

      .metric-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        min-width: 18rem;
        padding: 1.125rem;
        gap: 1.125rem;
        border: 0.125rem solid transparent;
        border-radius: 0.75rem;
        background-color: var(--background-color-secondary);
        transition: border-color 240ms var(--ease-fluid);

        &:focus-within,
        &:hover {
          border-color: var(--background-color-tertiary);
        }

        .label-wrapper {
          display: flex;
          gap: 0.5em;
          color: var(--color-heading);
          font-weight: 600;
        }

        .value {
          margin: 0;
          color: var(--color);
          font-size: var(--font-size-display);
          line-height: 1;
          font-family: var(--font-mono);
        }
      }
    }

    @media (max-width: 60rem) {
      .grid {
        grid-template-columns: 1fr;
        width: 100%;
      }
    }
  }
}
