#home-page > div {
    display: flex;
    flex-direction: row;

    gap: var(--large-gap);

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overflow: hidden;
    overflow-x: scroll;

    padding: 0px;
}

#home-page > div > div {
    display: flex;
    flex-direction: column;
    justify-content: start;

    gap: var(--gap-between-tiles);
    padding: var(--content-padding);
    padding-top: calc(var(--header-height) + var(--content-margin));

    width: 100%;
    min-width: 100%;
    height: 100%;
    overflow-y: auto;

    scroll-snap-align: center;
}

#home-page #overview-section,
#home-page #chat-section {
    padding-bottom: calc(
        var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
    );
}

#home-page #chat-grid {
    margin-top: var(--content-padding);

    display: grid;
    gap: var(--gap-between-tiles);

    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

@media (min-width: 640px) {
    #home-page > div {
        overflow-x: hidden;
    }

    #home-page #overview-section {
        width: 20rem;
        min-width: 20rem;
    }

    #home-page #chat-section {
        flex: 1;
        min-width: unset;
    }
}

@media (min-width: 1200px) {
    #home-page #overview-section,
    #home-page #chat-section {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    #home-page #chat-grid {
        margin-top: 3rem;
    }

    #home-page #overview-section {
        width: var(--max-input-width);
        min-width: var(--max-input-width);
    }
}