@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: "Roboto", sans-serif;
}

hr{
    border: 0;
    height: 1px;
    width: 100%;
    background-color: black;
    margin: 32px 0;
}

.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    width: 100%;
    padding: 0 17%;
}



/***** LIGHTS ******/
.lights{
    display: flex;
}
.lights__text-wrapper{
    flex: 2;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.lights__media-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.lights__image-wrapper{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lights__image{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/********* VAULT LOCK *******/
.vault-lock{

}

.vault-lock__section-1{
    display: flex;
}

.vault-lock__section-2{
    display: flex;
    flex-direction: row-reverse;
}



.vault-lock__text-wrapper{
    flex: 2;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.vault-lock__media-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}


.vault-lock__image-wrapper{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vault-lock__image{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.vault-lock__video{
    padding: 1rem 40px;
}


/********* END BUTTON *****/
.end-button{
    display: flex;
}

.end-button__text-wrapper{
    flex: 2;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}


.end-button__image-wrapper{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.end-button__image{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}