:root {
    --layout-home-margin: 1rem;
    --home-row-gap:6.5rem;
    --home-column-gap: 14rem;
}

.layout-home{
    margin: var(--layout-home-margin);
}

.body--home {
    height: 100dvh;
}

@media (max-width: 699px) {
    .home-grid {
        display: block;
    }

    :root {
        --layout-home-margin: 0.6rem;
    }
}

@media (min-width: 700px) {
    .body.body--home{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
        overflow: hidden;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .home-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--home-row-gap);
        column-gap: var(--home-column-gap);
        place-content: flex-start;
    }
    
    .home-grid__item:nth-last-child(-n + 6) {
        display: none;
    } 
}

@media (min-width: 900px) and (max-width: 1179px) {
    .home-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: var(--home-row-gap);
        column-gap: var(--home-column-gap);
        place-content: flex-start;
    }
    
    .home-grid__item:nth-last-child(-n + 4) {
        display: none;
    } 
}

@media (min-width: 1180px) and (max-width: 1250px) {
    .home-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: var(--home-row-gap);
        column-gap: var(--home-column-gap);
        place-content: flex-start;
    }
    
    .home-grid__item:nth-last-child(-n + 2) {
        display: none;
    } 
}

@media (min-width: 1251px) {
    .home-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        row-gap: var(--home-row-gap);
        column-gap: var(--home-column-gap);
        place-content: flex-start;
    }

    .home-grid__item{
        align-self: flex-start;
    }
}

@media (min-width: 700px) {
    .body--home {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .layout-home {
        flex: 1;
        min-height: 0;
        margin: 1rem;
    }

    .home-grid {
        height: 100%;
        align-content: flex-end; 
    }
}

@media (min-width: 700px) {
    .body--home {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    .layout-home {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin: var(--layout-home-margin);
    }

    .layout-home .desktop {
        margin-top: auto; 
    }
}