main.password-guard-wrapper{
    display: grid;
    grid-column: 1 / span 4; /* position */
    grid-row:2 / 4;
    gap: 0px;
}

section.password-guard__content .headline,
section.password-guard__content p,
section.password-guard__content a,
section.password-guard__content li {
     color: var(--accent-bg-color)
}

section.password-guard__content .headline{
    text-transform: uppercase;
}

section.password-guard__content ul{
    padding-top: var(--spacer-sm);
}

a.logo--full-width{
    grid-column: 1 / span 8;
}


.password-guard { 
    grid-column: 1; 
    grid-row: 1; 
    align-content: center;
    justify-content: center;
    margin: var(--spacer-xlg) 0px var(--spacer-lg);
}

.password-icon img{
    cursor: pointer;
    width: 25px;
    height: 25px;
}

.form__submit img{
    cursor: pointer;
    width: 20px;
    height: 20px;
}


.password-guard__form{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: var(--spacer-sm);
}

input#password{
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    height: 15px;
    padding-right: var(--spacer-sm);
    text-align: center;
}

input#password::placeholder{
    opacity: 0.4;
    transition: 0.3s ease-in-out;
    color: black;
}

input#password:hover::placeholder,
input#password:focus::placeholder{
  opacity: 0;
}

/* input#password:focus::placeholder{
  opacity: 0;
} */


.password-icon {
  cursor: pointer;
}




/* ------------------------ */
/* -------Responsive------- */
/* ------------------------ */

/* Tablet */
@media (max-width:1100px) or (max-height:400px) or  (orientation: portrait) {
    a.logo--full-width{
         grid-column: 1 / span 4;
    }
}


/* Phone */
@media (max-width:568px) {
    main.password-guard-wrapper{
        grid-column: 1 / span 8; /* position */
    }

    a.logo--full-width{
        grid-column: 1 / span 8;
        padding: var(--spacer-sm);
        padding-bottom: 0px;
    }

    section.password-guard__content{
        padding: var(--spacer-sm);
    }

    .form__submit svg{
    width: 30px;
    height: 30px;
}

}