section.hero {
    display: flex;
    flex-direction: column;
    padding: 4rem 1rem;
    align-items: center;

    div.cta-row {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    @media (max-width: 60rem) {
        padding: 1rem;
    }
}

section.collections {
    display: flex;
    flex-direction: column;
    align-items: center;

    div.grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 1rem;

        /* Ensure four columns on wide screens so all collections are in one row */
        @media (min-width: 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        article {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            &.jinnie-the-witch {
                padding-top: 0;

                picture {
                    margin-top: -2rem;
                    aspect-ratio: 12/10;
                }
            }

            picture {
                display: block;
                aspect-ratio: 4 / 3;
                overflow: hidden;

                & img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    /* Show the full image without cropping while preserving uniform media box */
                    object-fit: contain;
                    object-position: center;
                }

            }

            div {
                &.body {

                    display: flex;
                    flex-direction: column;
                    flex: 1 1 auto;

                    p {
                        flex: 1 1 auto;
                    }

                    .thumbs {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: .5rem;
                        margin: .25rem 0 1rem 0;

                        .thumb {
                            display: block;
                            border: 1px solid var(--color-border);
                            border-radius: .5rem;
                            padding: .25rem;
                            aspect-ratio: 1 / 1;
                            overflow: hidden;
                            /* Smooth, subtle hover */
                            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;

                            &:hover {
                                transform: translateY(-2px);
                                box-shadow: var(--shadow);
                                border-color: var(--color-secondary);

                                img {
                                    transform: scale(1.04);
                                }
                            }

                            img {
                                width: 100%;
                                height: 100%;
                                display: block;
                                object-fit: contain;
                                transition: transform .25s ease;
                            }
                        }
                    }

                    .btn-primary {
                        display: block;
                        --card-gap: 1rem; /* matches .card__body padding */
                        --inner-radius: max(0px, calc(var(--brand-rounding) - var(--card-gap)));
                        border-radius: var(--inner-radius);
                    }
                }
            }

        }
    }
}

section.about {
    display: flex;
    flex-direction: column;
    align-items: center;

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
        gap: 1rem;
        width: 100%;

        picture {

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;

            &.jinnie-the-witch {
                img {
                    margin-top: -2rem;

                }
            }

            &.manx-cider-co {
                background: var(--color-secondary);
            }


        }
    }
}

section.ethos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;

    .tile {
        padding: 1rem;
        flex: 1 1 auto;
    }
}

section.browse {
    display: flex;
    justify-content: center;
}