#home-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-content: flex-start;

    h1 {
        text-align: center;
        font-size: 60px;
        font-weight: bold;

        @media (max-width: 840px) {
            font-size: 32px;
        }
    }

    .search {
        width: 100%;
        max-width: 840px;
        margin: auto;

        --border-radius: 16px;
        --height: 52px;

        .searchform {
            > div {
                display: flex;

                @media (max-width: 840px) {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 8px;

                    input {
                        border-radius: 16px;
                    }
                }
            }

            input[type="text"] {
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
                box-shadow: inset 0 0px 4px var(--primary);
                height: var(--height);

                flex: 1;
                outline: none;
                padding: 0 16px;
                font-size: 16px;
            }

            input[type="submit"] {
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
                height: var(--height);

                background-color: var(--primary);
                color: var(--white);
                padding: 0 32px;

                font-size: 16px;
                text-transform: uppercase;
                font-weight: bold;

                transition: background-color 0.3s ease;
                cursor: pointer;

                &:hover {
                    background-color: var(--primary-dark);
                }
            }

            label.screen-reader-text {
                position: absolute;
                left: -9999px; /* hide visually but accessible */
            }
        }
    }

    .no-results {
        text-align: center;
        color: var(--gray);
        font-size: 22px;
    }

    .recipes {
        max-width: var(--max-width);
        margin: auto;
        width: 100%;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 60px;

        @media (max-width: 840px) {
            grid-template-columns: 1fr;
        }
    }

    .recipe-card {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        overflow: hidden;

        background-color: var(--white);
        box-shadow: 0 0px 4px var(--secondary);
        &:hover {
            box-shadow: 0 0px 4px var(--primary);
        }

        .cover-image {
            width: 100%;
            aspect-ratio: 33/22;
            background-position: center;
            background-size: cover;
        }

        .recipe-summary {
            padding: 16px;
            h2 {
                font-size: 24px;
                margin-bottom: 8px;
            }
            .meta {
                display: flex;
                align-items: center;
                color: var(--secondary);
                font-weight: 500;

                span {
                    line-height: 0;
                }
                > *:not(:last-child) {
                    margin-right: 8px;
                }
            }
        }
    }
}