.page-easter-eggs {
    .top {
        position: relative;

        > .floating-elements {
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            max-width: 1400px;
            .prohibition {
                @media (min-width: 960px) {
                    display: flex;
                    gap: 10%;
                }
                .text {
                    @media (min-width: 960px) {
                        width: 45%;
                    }
                    h1,
                    p,
                    .standout {
                        margin-bottom: 35px;
                    }
                }
                .images {
                    display: flex;
                    @media (min-width: 960px) {
                        width: 45%;
                        display: block;
                    }
                    img {
                        width: 50%;
                        align-self: center;
                        transform: rotate(-3deg);

                        @media (min-width: 960px) {
                            margin: auto;
                            width: 60%;
                        }

                        &:first-of-type {
                            transform: rotate(6deg);
                        }

                        @media (min-width: 960px) {
                            opacity: 0;
                        }
                    }
                }
            }

            .cigar {
                position: relative;
                max-width: 860px;
                margin: 100px auto;

                h2 {
                    position: relative;
                    z-index: 2;
                    margin: auto;
                }

                .element {
                    position: relative;
                    z-index: 1;
                    width: 70%;
                    max-width: 750px;
                    aspect-ratio: 1 / 1;
                    margin: -110px auto 0;

                    @media (min-width: 768px) {
                        margin-top: -125px;
                    }

                    @media (min-width: 960px) {
                        margin-top: -250px;
                    }

                    .smoke-container {
                        position: absolute;
                        inset: 0;
                        overflow: hidden;

                        img {
                            position: absolute;
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            mix-blend-mode: screen;
                            pointer-events: none;
                        }
                    }
                }
            }
        }
    }
    .bottom {
        position: relative;
        background-image: url('../images/bg-texture.webp');
        background-color: var(--color-richblack);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 63px 0;

        > .floating-elements {
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            max-width: 1400px;

            h2 {
                margin-bottom: 36px;

                @media (min-width: 960px) {
                    margin-bottom: 80px;
                }
            }

            .ads {
                display: grid;
                grid-template-columns: 1fr;
                gap: 60px;
                padding-bottom: 63px;

                @media (min-width: 640px) {
                    grid-template-columns: repeat(2, 1fr);
                }

                .ad {
                    width: 100%;
                    height: auto;
                    display: block;

                    @media (min-width: 640px) {
                        &:nth-child(odd) {
                            margin-top: 60px;
                        }
                    }

                    @media (min-width: 640px) {
                        opacity: 0;
                    }
                }
            }
        }
    }
}