.landing {
    background: var(--home-bg);
    scroll-behavior: smooth;

    .landing-intro {
        background: var(--home-intro-bg);
        display: flex;
        flex-direction: column;
        padding-top: 5rem;
        min-height: 100vh;
    }

    .box {
        border: 1px solid var(--home-border-color);
        border-radius: 10px;
        background-color: var(--home-box-bg);
    }

    .linkbox {
        font-family: var(--font-family);
        transition: background-color .3s;
        display: inline-flex;
        align-items: center;
        color: var(--home-linkbox-text-color);
        padding: .5rem 1rem;
        border: var(--home-linkbox-border);
        background-color: var(--home-linkbox-bg);
        border-radius: 10px;
        cursor: pointer;

        &:hover {
            background: var(--home-linkbox-hover-bg);
        }

        &.active {
            background: var(--home-highlight-color);
            color: var(--home-highlight-fore-color);

            &:hover {
                background: var(--home-highlight-darker-color);
            }
        }
    }

    .section-header {
        font-size: 2rem;
        color: var(--home-primary-text-color);
        font-weight: 700;
        text-align: center;
        padding: 0 2rem;
    }

    .section-detail {
        text-align: center;
        color: var(--home-secondary-text-color);
        font-weight: 500;
        font-size: 1.143rem;
        margin: 1.5rem 0 0 0;
        padding: 0 2rem;
    }

    .section-divider {
        border: 1px solid var(--home-border-color);
        height: 1px;
        border-bottom: 0 none;
        overflow: hidden;
    }
}

.text-secondary {
    color: var(--home-secondary-text-color);
}

.hover\:surface-hover:hover {
    background-color: var(--surface-hover);
}

.pad-section {
    padding-left: 12rem;
    padding-right: 12rem;
}

@media screen and (max-width: $landingBreakpointXL) {
    .pad-section {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}

@media screen and (max-width: $landingBreakpointLG) {
    .pad-section {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media screen and (max-width: $landingBreakpointMD) {
    .pad-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}