body{
  margin: 0;
  padding: 0;

}

:root{
  --body-bg: #001353;
  --body-bg-light: #322f3d;
  --old-nav-color: #0584ff;

}

*{
  box-sizing: border-box;
}

.how-to-outer{
  height: 100%;
  width: 100%;
  overflow: scroll;
  padding: 10px;

}
  .how-to-list{
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    background: white;
    grid-gap: 10px;
    justify-content: center;

  }

    .how-to-container{
      height: auto;
      background: #ffffff;
      position: relative;
      color: black;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
      border-radius: 6px;
      padding: 10px;

    }

      .how-to-preview{
        /*border: 1px solid green;*/
        height: auto;
        width: auto;
        max-height: 275px;
        overflow: scroll;
    
      }

        .how-to-preview img{
          width: 100%;
          height: auto;
        }

      .how-to-title{
        font-size: 20px;
        padding: 10px;
        line-height: 30px;
      }

      .how-to-link{
        color: black;
        text-decoration: none;
      }

      .how-to-link:hover{
        transition: all 0.4s;
        color: #888;

      }

/* if less than */
@media only screen and (max-width: 700px) {
  .how-to-list{
    grid-template-columns: 50% 50%;
  }
}

@media only screen and (max-width: 414px) {
  .how-to-list{
    grid-template-columns: 100%;
  }
}