@media (min-width:1279px) {}

@media (max-width:1279px) {}

@media (max-width:992px) {
    header {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        z-index: 100;
    }
    nav.d-menu {
        display: none;
    }
    nav.m-menu {
        display: block;
    }
    .intro-section {
        justify-content: center;
        text-align: center;
    }
    .intro-text {
        max-width: 100%;
    }
    .intro-images {
        width: 100%;
        margin-top: 5rem;
    }
}

@media (max-width:768px) {
    .float-tr, .float-bl {
        display: none;
    }
    .demo {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 0.5fr) 3fr repeat(3, 0.5fr);
        grid-template-areas: "item1" "item2" "item3" "image" "item4" "item5" "item6";
        gap: 1rem;
    }
    .demo p {
        text-align: center;
    }
    .demo .description {
        margin-bottom: 3rem;
    }
    footer .links {
        display: flex;
        flex-direction: column;
        padding-bottom: 2rem;
    }
    footer .links div {
        margin-bottom: 3rem;
    }
}

@media (max-width:480px) {
    .main-img {
        width: 100%;
    }
}