@import '../../../../custom-media.css';
@import '../../../../custom-properties/color.css';

.g-grid-container__demo {
  & .metrics {
    margin-top: 2rem;

    &.small {
      display: none;
      @media (--small) {
        display: block;
      }
    }

    &.medium {
      display: none;
      @media (--medium) {
        display: block;
      }
    }

    &.large {
      display: none;
      @media (--large) {
        display: block;
      }
    }
  }

  & .legend {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;

    & .legend-swatch {
      display: flex;
      align-items: center;
      margin-right: 0.5rem;
      margin-bottom: 1rem;

      & .swatch {
        height: 1rem;
        width: 1rem;
        display: inline-block;
        margin-right: 0.5rem;

        &.margin {
          background: var(--brand-l2);
        }

        &.padding {
          background: var(--brand-l1);
        }

        &.content-area {
          background: var(--brand);
        }
      }
    }
  }

  & .demo-container {
    background: var(--brand-l2);

    & > .g-grid-container {
      background: var(--brand-l1);

      & > .content-area {
        background: #0853e9;
        min-height: 10rem;
        display: grid;

        @media (--small) {
          grid-template-columns: 1fr 1fr 1fr 1fr;
          grid-gap: 16px;
        }

        @media (--medium) {
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
          grid-gap: 24px;
        }

        @media (--large) {
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
          grid-gap: 32px;
        }

        & .grid-area {
          background: var(--brand);

          &:nth-child(n + 5) {
            display: none;

            @media (--medium-up) {
              display: block;
            }
          }
        }
      }
    }
  }
}