#wyroby {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    width: 100%;
    gap: 2rem;

    & > .card {
        width: 100%;
    }

    & > .card > div:first-child {
        background: var(--surface-container-highest);
        aspect-ratio: 4 / 3;
    }

    & > .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;
            color: var(--on-surface);
            font-size: 0.875em;
        }
    }
}