@layer page {
    .top-bg {
        top: 0;
        position: absolute;
        width: 100%;
        height: 200%;
        background-image: url(/images/hero-bg.png);
        background-position: top right;
        background-repeat: no-repeat;
        z-index: -100;
        background-size: 50%;

        @media screen and (min-width: 992px) {
            background-size: initial;
        }
    }

    .main.page {
        .segment {
            &.hero {
                padding-top: 3rem;
                padding-bottom: 3rem;

                .area {

                    &.top {
                        h1 {
                            color: var(--text-color);
                            font-size: 3rem;
                            font-weight: 400;
                            margin: 0;
                            margin-bottom: 1rem;
                            background-color: var(--white-transparent-background-color);
                            border-radius: 0.6rem;
                            width: fit-content;
                        }

                        .sub-header {
                            display: flex;
                            flex-direction: column;
                            flex-wrap: nowrap;
                            gap: .5rem;

                            p {
                                margin: 0;
                                padding: 0;
                                font-size: 1.5rem;
                                color: var(--neutral-color);
                                background-color: var(--white-transparent-background-color);
                                border-radius: 0.6rem;
                                width: fit-content;
                            }
                        }

                        & > .location {
                            display: flex;
                            flex-wrap: nowrap;
                            flex-direction: row;
                            justify-content: center;
                            margin-top: 2rem;

                            .content {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                gap: 1rem;

                                .site-icon {
                                    background-color: #BF420F;
                                    width: 2rem;
                                    height: 2rem;
                                }

                                .text {
                                    color: #BF420F;
                                    font-size: 2rem;
                                }
                            }
                        }
                    }

                    &.bottom {
                        margin-top: 7rem;

                        .top-message-box {
                            display: grid;
                            grid-template-columns: max-content auto;
                            column-gap: 1rem;
                            row-gap: .5rem;

                            @media screen and (min-width: 992px) {
                                grid-template-columns: max-content max-content;
                            }

                            img.avatar {
                                align-self: start;
                                width: 5rem;
                                border-radius: 10rem;

                                @media screen and (min-width: 992px) {
                                    width: 10rem;
                                }
                            }

                            .content {
                                p {
                                    color: var(--text-color);

                                    &.header {
                                        font-weight: bold;
                                        margin-top: 0;
                                    }
                                }
                            }

                            .social {
                                grid-column: 2 / 3;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                justify-content: flex-start;
                                gap: 2rem;
                                margin-top: 1rem;

                                .site-icon {
                                    --site-icon-size: 3.5rem;
                                }
                            }
                        }
                    }
                }
            }

            &.catalog {
                margin-top: 12rem;
                margin-bottom: 5rem;

                h2 {
                    font-weight: 500;
                    color: var(--primary-color);
                }

                .list {
                    display: grid;
                    grid-template-columns: 1fr;
                    column-gap: 2rem;
                    row-gap: 3rem;
                    margin-top: 5rem;

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

                    @media screen and (min-width: 992px) {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }
            }

            &.bottom {
                margin-top: 10rem;
                margin-bottom: 10rem;
            }
        }
    }
}