<script setup>
    import Header from '../components/Header.vue';
    import Footer from '../components/Footer.vue';


</script>

<template>
    <Header/>
    <div class="auth-layout">
        <RouterView/>
    </div>
    <Footer/>
</template>

<style scoped>
    /* .auth-layout {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin: 0px 0px !important;
        padding: 0px 0px !important;
        overflow: hidden;
    } */
    .auth-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        /* background-color: red; */
        width: 55%;
        margin: 0px auto !important;
        padding: 0px 5px !important;
        overflow: hidden;
        min-height: 700px;
    }

    @media (max-width: 1024px) {
        .auth-layout {
            width: 70%;
        }
    }

    @media (max-width: 768px) {
        .auth-layout {
            width: 90%;
        }
    }
</style>