.landing-page {
    @extend .layout;
    @extend .d-flex;
    @extend .flex-column;

    a {
        color: $secondary;
        transition: $transition-base;
        @extend .text-decoration-none;

        &:hover {
            color: $primary;
        }
    }

    .content {
        @extend .flex-fill;
    }

    .list-view {
        transition: $transition-base;

        .list-view-icon {
            background-color: var(--bs-primary-bg-subtle);
            @extend .flex-center;
            @extend .rounded;
            transition: $transition-base;

            svg {
                color: $primary;
            }
        }

        &:hover {
            .list-view-icon {
                background-color: $primary;

                svg {
                    color: $white;
                }
            }
        }
    }

    .card-view {
        @extend .position-relative;
        @extend .text-center;
        transition: $transition-base;

        .card-view-icon {
            @extend .position-relative;
            @extend .flex-center;
            @extend .mx-auto;
            @extend .rounded;
            border-width: .5px;
            border-style: solid;
            border-color: var(--bs-border-color-translucent);
            transition: $transition-base;
        }

        &:hover {
            .card-view-icon {
                border-color: $primary;
                @extend .shadow;
            }
        }
    }

    @import 'landing/footer';
    @import 'landing/home';
    @import 'landing/tracking';
}

@include media-breakpoint-up(lg) {
    .landing-page {
        .navbar-nav {
            gap: $spacer;
        }
    }
}