.board {
  position: relative;
  padding: 12vh 6vw;
  height: auto; }
  .board .grid-container {
    margin-top: 20vh;
    display: grid;
    grid-gap: 7px;
    margin-left: 5px;
    margin-right: 5px;
    grid-template-areas: "calender" "event-1" "event-2" "banner-1" "banner-2" "achieve-2" "achieve-1"; }
    .board .grid-container .grid img {
      padding: 15px 15px;
      max-height: 200px; }
    .board .grid-container #calender {
      grid-area: calender;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .board .grid-container #event-1 {
      grid-area: event-1;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .board .grid-container #event-2 {
      grid-area: event-2;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .board .grid-container #banner-1 {
      grid-area: banner-1;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .board .grid-container #banner-2 {
      grid-area: banner-2;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .board .grid-container #achieve-1 {
      grid-area: achieve-1;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex;
      padding: 15px 15px; }
    .board .grid-container #achieve-2 {
      grid-area: achieve-2;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }

.grid-layout {
  position: relative;
  padding: 12vh 6vw;
  height: auto; }
  .grid-layout .grid-container1 {
    margin-top: 20vh;
    display: grid;
    grid-gap: 7px;
    margin-left: 5px;
    margin-right: 5px;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "h" "i" "j" "k"; }
    .grid-layout .grid-container1 .grid1 {
      display: flex;
      flex-direction: column; }
      .grid-layout .grid-container1 .grid1 h5 {
        font-weight: bold;
        padding: 15px; }
      .grid-layout .grid-container1 .grid1 .traacsPic {
        position: relative;
        width: 200px;
        height: 200px; }
        .grid-layout .grid-container1 .grid1 .traacsPic img {
          padding: 15px 15px;
          height: 100%;
          width: 100%;
          border-radius: 50%;
          object-fit: cover; }
      .grid-layout .grid-container1 .grid1 a {
        border-radius: 30px;
        margin: 30px 20px;
        font-weight: 200;
        letter-spacing: 1px;
        color: white;
        text-decoration: none;
        padding: .75em 2.75em;
        font-size: 10px;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        background: #00897B; }
        .grid-layout .grid-container1 .grid1 a:hover {
          box-shadow: 0px 0px 0px 2px #00897B inset, 0px 0px 0px 4px white inset; }
        .grid-layout .grid-container1 .grid1 a:active {
          transform: scale(0.9); }
    .grid-layout .grid-container1 #a {
      grid-area: a;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #b {
      grid-area: b;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #c {
      grid-area: c;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #d {
      grid-area: d;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #e {
      grid-area: e;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #f {
      grid-area: f;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #h {
      grid-area: h;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #i {
      grid-area: i;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #j {
      grid-area: j;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
    .grid-layout .grid-container1 #k {
      grid-area: k;
      background-color: #979797;
      align-items: center;
      justify-content: center;
      display: flex; }
  .grid-layout .gridkbs #kbs {
    width: 200px; }

/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1000px) {
  .board {
    position: relative;
    padding: 12vh 6vw;
    height: auto; }
    .board .grid-container {
      margin-top: 10px;
      display: grid;
      grid-gap: 7px;
      grid-template-areas: "achieve-1 event-1 banner-1 banner-1" "achieve-1 calender calender achieve-2" "achieve-1 calender calender achieve-2" "event-2 banner-2 banner-2 achieve-2"; }
      .board .grid-container .grid img {
        padding: 15px 15px;
        max-height: 300px; }
      .board .grid-container #calender {
        grid-area: calender;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex; }
      .board .grid-container #event-1 {
        grid-area: event-1;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex; }
      .board .grid-container #event-2 {
        grid-area: event-2;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex; }
      .board .grid-container #banner-1 {
        grid-area: banner-1;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex; }
      .board .grid-container #banner-2 {
        grid-area: banner-2;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex; }
      .board .grid-container #achieve-1 {
        grid-area: achieve-1;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex;
        padding: 15px 15px; }
      .board .grid-container #achieve-2 {
        grid-area: achieve-2;
        background-color: #979797;
        align-items: center;
        justify-content: center;
        display: flex; }

  .grid-layout {
    position: relative;
    padding: 12vh 6vw;
    height: auto; }
    .grid-layout .grid-container1 {
      margin-top: 10px;
      display: grid;
      grid-gap: 7px;
      grid-template-areas: "a b c d e" "f h i j .";
      max-width: 100vw; }
      .grid-layout .grid-container1 .grid1 {
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between; }
        .grid-layout .grid-container1 .grid1 img {
          padding: 15px 15px;
          height: auto;
          width: 100%; }
        .grid-layout .grid-container1 .grid1 h5 {
          text-align: center;
          text-decoration: solid;
          font-weight: bold; }
        .grid-layout .grid-container1 .grid1 a {
          border-radius: 30px;
          margin: 30px 20px;
          font-weight: 200;
          letter-spacing: 1px;
          color: white;
          text-decoration: none;
          padding: .75em 2.75em;
          font-size: 10px;
          -webkit-transition: all 300ms ease-out;
          -moz-transition: all 300ms ease-out;
          transition: all 300ms ease-out;
          background: #00897B; }
          .grid-layout .grid-container1 .grid1 a:hover {
            box-shadow: 0px 0px 0px 2px #00897B inset, 0px 0px 0px 4px white inset; }
          .grid-layout .grid-container1 .grid1 a:active {
            transform: scale(0.9); }
      .grid-layout .grid-container1 #a {
        grid-area: a;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #b {
        grid-area: b;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #c {
        grid-area: c;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #d {
        grid-area: d;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #e {
        grid-area: e;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #f {
        grid-area: f;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #h {
        grid-area: h;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #i {
        grid-area: i;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #j {
        grid-area: j;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; }
      .grid-layout .grid-container1 #k {
        grid-area: k;
        background-color: #979797;
        align-items: center;
        justify-content: space-between;
        display: flex; } }