@media(max-width:900px) {
    .burger {
        display: block
    }

    .nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--ivory);
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
        border-bottom: 1px solid #e6dcc6;
        max-height: 80vh;
        overflow: auto
    }

    .nav.open {
        display: flex
    }

    .nav a,
    .dd>a {
        padding: 10px 0;
        min-height: 44px;
        display: block
    }

    .ddm {
        position: static;
        box-shadow: none;
        width: auto;
        padding: 0 0 0 12px
    }

    .dd:hover .ddm {
        display: none
    }

    .dd.open .ddm {
        display: block
    }

    .two,
    .asym,
    .fgrid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .float-card {
        left: 10px
    }

    .bento {
        grid-template-columns: 1fr
    }

    .bento>div {
        grid-column: auto !important
    }

    .masonry {
        columns: 2
    }

    .gp {
        grid-template-columns: repeat(2, 1fr)
    }

    .sec {
        padding: 56px 0
    }
}

@media(max-width:560px) {
    .frm {
        grid-template-columns: 1fr
    }

    .masonry {
        columns: 1
    }

    .logo small {
        display: none
    }

    .fb {
        padding: 12px 14px
    }
    nav:last-child{text-align: center;}
}