#login {
    padding-bottom: 3em;
}
#login::before {
    content:        '';
    display:        block;
    width:          100%;
    padding-top:    55%;
    background:     url(../images/joblabo-dunkerque.jpg) no-repeat center / 100% auto;
}
#login #login__form {
    margin:         -5.5em 5% 0 5%;
    padding:        1.5em 1em 0em 1em;
    width:          90%;
    background:     rgba(255,255,255,.9);
    box-shadow:     0 0 1em rgba(0,0,0,.3);
}
#login #login__form h2 {
    padding-bottom: .6em;
    font-size:      2.2em;
}
#login #login__form p,
#login #login__form form {
    line-height:    1.2em;
    padding-bottom: 1.3em;
}
#login #login__form input.text {
    display:        inline-block;
    width:          100%;
    margin-bottom:  .2em;
}
#login #login__form button.button {
    width:          100%;
    box-shadow:     none;
}

#login #login__form .login__callback {
    margin-top:     .2em;
    color:          #fff;
    background:     var(--green);
}
#login #login__form .login__callback.error {
    background:     var(--red);
}
#login #login__form .login__callback p {
    padding:        .8em 1em;
}


#main {
    padding-bottom:     0;
}
#index {
    padding:            4em 1.3em 5em 1.3em;
    background:         url(../images/background-hexagon.png) no-repeat bottom left / 100% auto;
}
#index #index__content .content-griditem {
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    padding:            0;
}
#index #index__content .content-griditem figure {
    position:       relative;
    padding-top:    50%;
    width:          100%;
    overflow:       hidden;
    background:     #eee;
}
#index #index__content .content-griditem figure img {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
}
#index #index__content .content-griditem p {
    padding:            1em;
    height:             100%;
}
#index #index__content .content-griditem p+p {
    height:             auto;
}
#index #index__content .content-griditem .button {
    margin-top:         2em;
}

@media (min-width: 700px) {
    #login::before {
        padding-top:    30%;
    }
    #login #login__form {
        margin:         -5.5em auto 0 auto;
        width:          30em;
        background:     rgba(255,255,255,.9);
        box-shadow:     0 0 1em rgba(0,0,0,.3);
    }
}
@media (min-width: 900px) {
    #login::before {
        padding-top:    15em;
    }
    #index .main__wrapper .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
    }
}
@media (min-width: 1200px) {
    #index .main__wrapper .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    }
}