@media only screen and (max-width: 900px) {
    ol.snapshots {
        display: grid;
    }

    ol.project {
        margin-top: 24px;
    }

    .vertical_bottom {
        width: auto;
      }
    
    aside{
        justify-content: initial;
    }

    main {
        width: calc(100vw - 32px);
        left: 16px;
        top: 40vh;
        z-index: 3;
      }

      header {
        text-align: right;
        width: auto;
        right: 0;
        width: 40vw;
      }

      aside {
        top: 0;
        width: 50vw;
      }

      .information{
        display: grid;
      }

      li.nav-item a{
        border-radius: 16px;
        background-color: #C4A8FF;
      }

      li.nav-item.current_page_item a{
        border-radius: 0px;
      }

      li.nav-item.current_page_item a:hover{
        border-radius: 0px;
        background-color: white;
      }

      li.nav-item a:hover{
        background-color: white;
    }

    header.other li.nav-item a{
        color: black;
    }

    header.other li.nav-item a:hover {
        color: white;
        background-color: #1C1C1C;
    }

    header.other li.nav-item.current_page_item a{
        border-radius: 0px;
    }

    li.client-item {
        line-height: 130%;
    }

    button{
        background-color: white;
    }

    button:hover{
        background-color: #C4A8FF;
    }

    h5{
        font-size: 14px;
    }

    .breaking {
        display: block;
    }

    figcaption {
    margin-top: -68px;
    margin-left: 12px;
    }

    .client-item.preview {
    padding-bottom: 8px;
    }

    .dot {
    margin-left: 0px;
    }
}

@media only screen and (max-width: 730px) {

    header{
        width: 45vw;
      }

    aside {
    top: 0;
    width: 45vw;
    }

}