@layer addon {

    .whitepaper {
        .nav {
            color: var(--color-dark);
        }
        
        section:first-of-type {
            .scrollDown {
                color: var(--color-dark);
            }

            @media (min-width: 56em) {
                height: 100vh;
            }

            @media (--min-fablet) {
                height: 100vh;
            }
            
            .media {
                img {
                    aspect-ratio: 1;
                }
            }
        }

        .templateMedia.form {
            .media {
                &.employee {
                    &:before, &:after {
                        display: none;
                    }
                    .media img {
                        aspect-ratio: 1/1;
                    }
                }
                overflow: visible;
                .inner {
                    background-color: var(--color-dark);
                    padding: var(--padding);
                    gap: var(--gutter);
                    
                    @media (min-width: 56em) {
                        position: absolute;
                        top: calc(100% - 115px);
                        left: 50%;
                        transform: translateX(-50%);
        
                        min-width: 230px;
                        min-height: 230px;
                    }
                    
                    @media (--min-fablet) {
                        position: absolute;
                        top: calc(100% - 115px);
                        left: 50%;
                        transform: translateX(-50%);
        
                        min-width: 230px;
                        min-height: 230px;
                    }
                    .title {
                        font-size: var(--fontsize);
                        line-height: var(--lineheight);
                        font-family: "Bungee", sans-serif;
                        text-align: center;
                    }
                    .title, .button {
                        color: var(--color-light);
                    }
                    .footer {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: wrap;
                        gap: calc(var(--gutter) / 2);
                        .button {
                            .icon {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    
}