header {
    position: relative;
    border-radius: 3rem;
    height: 40vh;
    color: var(--white);

    .media-container {
        position: relative;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 3rem;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 3rem;
            pointer-events: none;
        }
    }

    .content-container {
        position: absolute;
        top: 1rem;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;

        .links {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            height: fit-content;

            a {
                font-size: 3rem;

                svg path {
                    fill: var(--white);
                }
            }

            .btn {
                border-radius: 2rem;
            }

            .language {
                button {
                    padding: 1.5rem;
                }
            }

            .logout {
                a.btn {
                    font-size: 1.6rem;
                    padding: 1.5rem;
                }
            }
        }

        .logo {
            position: absolute;
            top: 1rem;
            left: 1rem;
            width: max-content;

            svg {
                width: 25rem;
                height: 10rem;
            }
        }

        .title {
            position: absolute;
            bottom: 1rem;
            left: 1rem;

            h1 {
                line-height: 8rem;
                font-weight: bold;
                font-size: 7rem;

                @media (min-width: 1200px) {
                    font-size: 9rem;
                }
            }
        }

        .login {
            position: absolute;
            top: 1rem;
            bottom: 1rem;
            right: 1rem;
            width: 30%;
            height: fit-content;
            background-color: var(--white);
            color: var(--dark-green);
            border-radius: 1rem;

            p.t {
                font-size: 3.6rem;
            }

            label, a {
                font-size: 1.6rem;
            }
        }
    }

    &.homepage-header {
        height: 90vh;

        .content-container {
            .logo {
                svg {
                    width: 40rem;
                    height: 15rem;
                }
            }

            .title {
                max-width: 60%;
            }

            .language {
                position: absolute;
                top: 1rem;
                right: 1rem;
            }
        }
    }
}

footer {
    z-index: 1;
    position: relative;

    p, a {
        color: var(--white);
    }

    .media-container {
        position: relative;
        height: 50vh;

        .img-container {
            position: absolute;
            margin-top: -10rem;
            bottom: -4rem;
            z-index: -2;

            &.bg-white {
                &:after {
                    background: -moz-linear-gradient(to bottom, var(--white) 0%, rgba(255, 255, 255, 0) 35%);
                    background: -webkit-linear-gradient(top, var(--white) 0%, rgba(255, 255, 255, 0) 35%);
                    background: linear-gradient(to bottom, var(--white) 0%, rgba(255, 255, 255, 0) 35%);
                }
            }

            &:after {
                background: -moz-linear-gradient(to bottom, var(--background-grey) 0%, rgba(255, 255, 255, 0) 35%);
                background: -webkit-linear-gradient(top, var(--background-grey) 0%, rgba(255, 255, 255, 0) 35%);
                background: linear-gradient(to bottom, var(--background-grey) 0%, rgba(255, 255, 255, 0) 35%);
                content: '';
                position: absolute;
                top: -0.1rem;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}