﻿.auth-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
    height: 100%;
}

.auth-left {
    display: flex;
    grid-area: left;
    justify-content: center;
    align-items: center;
}


.content-left {
    display: flex;
    grid-area: left;
    justify-content: center;
}


.content-right {
    display: flex;
    grid-area: right;
    justify-content: center;
}

.panel-img{
    width: 100%;
    height: 100%;
}

.content-block {
    width: 70%;
    height: fit-content;
}

.right-panel {
    background-size: auto 100%; /* Fit height */
    background-position: center; /* Center the image horizontally */
    background-repeat: no-repeat;
    grid-area: right;
}


.auth-right {
    background-image: url("../../Images/dataprotection_v2.jpeg");
    background-size: auto 100%; /* Fit height */
    background-position: center; /* Center the image horizontally */
    background-repeat: no-repeat;
    grid-area: right;
}

.reg-right {
    background-image: url("../../Images/register.jpg");
    background-size: auto 100%; /* Fit height */
    background-position: center; /* Center the image horizontally */
    background-repeat: no-repeat;
    grid-area: right;
}

.profile-right {
    background-image: url('../../Images/profile.jpg');
}

.introduction-right {
    background-image: url('../../Images/Introduction.jpeg' );
}

.video-right {
    background-image: url('../../Images/video.jpeg' );
}


.rz-form-field{
    width: 100%;
}

.rz-form-field-content{
    display: block;
}


.logo-alignment {
    display: flex;
    justify-content: start;
}



@media (max-width: 768px) {
    .auth-main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "top"
            "bottom";
        height: 100%;
    }

    .left-content-block {
        width: 90%;
    }


    .content-left,
    .auth-left {
        grid-area: top;
        width: 100%;
        align-items: normal;
        margin-bottom: 20px;
    }

    .content-right {
        grid-area: bottom;
        width: 100%;
        align-items: normal;
        margin-bottom: 20px;
    }




    .auth-right {
        background-size: auto 100%; /* Fit width */
        grid-area: bottom;
        
    }

    .reg-right {
        background-size: auto 100%; /* Fit width */
        grid-area: bottom;
    }

    .logo-alignment {
        justify-content: end;
    }


    .right-panel {
        height: 100%;
        grid-area:bottom;
    }
}


@media (max-width: 900px) and (orientation: portrait) {
    .auth-main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "top"
            "bottom";
        height: 100%;
    }


    .content-block,
    .left-content-block {
        width: 90%;
    }

    
    .content-left,
    .auth-left {
        grid-area: top;
        width: 100%;
        align-items: normal;
        margin-bottom: 20px;
    }

    .content-right,
    .right-panel {
        grid-area: bottom;
        width: 100%;
        align-items: normal;
        margin-bottom: 20px;
    }



    .auth-right {
        background-size: auto 100%; /* Fit width */
        grid-area: bottom;
    }

    .reg-right {
        background-size: auto 100%; /* Fit width */
        grid-area: bottom;
    }

    .logo-alignment {
        justify-content: end;
    }
}
