@layer components {
    .proceedings {
        padding: var(--section-padding);

        & .proceedings__inner {
            /* max-width a margin rieši l-container */
        }

        & .proceedings__header {
            text-align: center;
            margin-bottom: 4rem;

            & .proceedings__title {
                font-size: 2.5rem;
            }
        }

        & .proceedings__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 350px;
            grid-auto-flow: dense;
            gap: 1.5rem;

            @media (max-width: 1024px) {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 300px;
            }

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