@import "base.css";

#wyroby {
    padding-top: 2rem;

    & > header {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        & > p {
            margin: 0;
        }
        & > * {
            text-align: center;
            max-width: 40rem;
        }
        & > div {
             display: flex;
             align-items: center;
             gap: 1rem;
             justify-content: center;
             padding: 3rem;
         }
    }



    & > section {
        padding-top: 1rem;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(auto-fill, 18rem);
        width: 100%;
        gap: 2rem;

        & > .card {
            & > div:last-child {
                display: grid;
                grid-template-columns: auto auto;
                grid-template-rows: auto auto;
                & > h3 {
                    font-size: 1.25rem;
                }

                & > span {
                    color: var(--primary);
                    font-size: 1.25rem;
                    font-weight: bold;
                    justify-self: end;
                }

                & > p {
                    grid-row: 2;
                    grid-column: 1/span 2;
                    text-color: var(--on-surface);
                    font-size: 0.875em;
                }

            }
        }
    }
}