/// devcard.less - Styling for devcard landing page


.page-devcard {
  display: grid;
  background-color: #color[background-light];
  grid-template-areas:
    "spacer  header header"
      "sidebar content content";
  grid-template-columns: 1fr 2fr 2fr;
  margin-bottom: 8em;

  .spacer {
    background-color: #color[primary];
  }

  .header {
    color: #color[background-light-accent-2];
    background-color: #color[primary];
    padding: 5vh;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    grid-area: header;
  }

  .sidebar {
    grid-area: sidebar;
    margin: 0.5em;
    border-radius: 5px;
    background-color: #color[secondary];
    color: #color[background-light-accent-2];
  }

  .content {
    display: flex;
    flex-direction: column;
    grid-area: content;
    margin: 0.5em;
    background-color: #color[background-light];

    .grouping {
      #mixin.box-shadow.main();
      display: flex;
      flex-direction: column;
      margin: 0.5em;
      padding: 0.5em;
      
      .title {
	height: 40px;
      }
      
      .body {
	display: flex;
	align-content: space-between;
	justify-content: space-evenly;
	flex-wrap: wrap;
	padding: 1em;

        > .scrollable-fixed-vertical {
          > div {
            width: 250px;
            height: 300px;
          }
        }

        > .scrollable-fixed-horizontal {
          > div {
            width: 250px;
          }
        }

      }
    }

    .dark-grouping {
      .grouping();
      background-color: #color[primary];

      > .title {
        color: white;
      }
    }
  }
}
