body {
    margin: 0;
}

@media (min-width: 1024px) {
    body {
        overflow: hidden;
    }
    .home-layout {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 100vh;
        align-items: center;
        justify-items: center;
    }

    .hero-section {
        grid-column: 1 / span 1;
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .login-section {
        grid-column: 2 / span 1;
        display: grid;
        grid-template-rows: 30% 70%;
        align-items: center;
        justify-items: start;
        height: 100%;
        width: 100%;
    }

    .login-section-logo {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }

    .login-section-component {
        grid-row: 2 / span 1;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: start;
        width: 100%;
        height: 100%;
    }

    .login-logo {
        height: 10rem;
    }
}

@media (max-width: 1023px) {
    body {
        overflow: hidden;
    }
    .home-layout {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-rows: 100vh;
        grid-template-columns: 100vw;
        align-items: center;
        justify-items: center;
    }

    .hero-section {
        display: none;
    }

    .login-section {
        grid-row: 1 / span 1;
        display: grid;
        grid-template-rows: 30% 70%;
        align-items: center;
        justify-items: start;
        width: 100%;
        height: 100%;
    }

    .login-section-logo {
        grid-row: 1 / span 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }

    .login-logo {
        height: 6rem;
    }

    .login-section-component {
        grid-row: 2 / span 1;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: start;
        width: 100%;
        height: 100%;
    }
}


/*.hero-section {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100vh;*/
/*    background-size: cover;*/
/*    overflow: hidden;*/
/*}*/

/*.hero-logo {*/
/*    position: absolute;*/
/*    top: 3rem;*/
/*    left: 4rem;*/
/*    height: 12rem;*/
/*    width: auto;*/
/*    z-index: 2;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.login-button {*/
/*    position: absolute;*/
/*    top: 3rem;*/
/*    right: 4rem;*/
/*    background-color: transparent;*/
/*    border: 5px solid white;*/
/*    color: white;*/
/*    padding: 0.6rem 1.5rem;*/
/*    border-radius: 25px;*/
/*    font-weight: 600;*/
/*    font-size: large;*/
/*    cursor: pointer;*/
/*    transition: all 0.3s ease;*/
/*    z-index: 2;*/
/*}*/

/*.login-button:hover {*/
/*    background-color: white;*/
/*    color: black;*/
/*}*/

/*!* Małe telefony: poniżej 480px *!*/
/*@media (max-width: 480px) {*/
/*    .hero-logo {*/
/*        height: 5rem;*/
/*        top: 1rem;*/
/*        left: 1rem;*/
/*    }*/

/*    .login-button {*/
/*        top: 1rem;*/
/*        right: 1rem;*/
/*        padding: 0.3rem 0.8rem;*/
/*        font-size: 0.8rem;*/
/*        border-width: 3px;*/
/*    }*/
/*}*/

/*!* Telefony: 481px - 768px *!*/
/*@media (min-width: 481px) and (max-width: 768px) {*/
/*    .hero-logo {*/
/*        height: 7rem;*/
/*        top: 1.5rem;*/
/*        left: 2rem;*/
/*    }*/

/*    .login-button {*/
/*        top: 1rem;*/
/*        right: 1rem;*/
/*        padding: 0.4rem 1rem;*/
/*        font-size: 0.9rem;*/
/*        border-width: 3px;*/
/*    }*/
/*}*/

/*!* Tablety i mniejsze laptopy: 769px - 992px *!*/
/*@media (min-width: 769px) and (max-width: 992px) {*/
/*    .hero-logo {*/
/*        height: 9rem;*/
/*        top: 2.5rem;*/
/*        left: 3rem;*/
/*    }*/

/*    .login-button {*/
/*        top: 2rem;*/
/*        right: 2rem;*/
/*        padding: 0.5rem 1.2rem;*/
/*        font-size: 1rem;*/
/*        border-width: 4px;*/
/*    }*/
/*}*/

/*!* Duże ekrany: powyżej 992px *!*/
/*@media (min-width: 993px) {*/
/*    .hero-logo {*/
/*        height: 12rem;*/
/*        top: 3rem;*/
/*        left: 4rem;*/
/*    }*/

/*    .login-button {*/
/*        top: 3rem;*/
/*        right: 4rem;*/
/*        padding: 0.6rem 1.5rem;*/
/*        font-size: large;*/
/*        border-width: 5px;*/
/*    }*/
/*}*/