.grid {
            height: 100%;
            width: 100%;
            display: block;

            &__pictures-box {
                height: 100%;
                width: 100%;
                background-color: $color-white;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 10vw);
                grid-gap: .5rem;
                padding: .5rem;
                grid-gap: 10;
                // align-content: end;
                // justify-content: end;
                grid-auto-rows: auto;
                grid-auto-columns: auto;
            }

            &-picture {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;

            }

            // SKAŁA
            &-picture--1 {
                grid-row: 1 / span 2;
                grid-column: 2 / span 2;
            }

            // APARAT
            &-picture--2 {
                grid-row: 1 / span 1;
                grid-column: 1 / span 1;
            }

            // CAR
            &-picture--3 {
                grid-row: 2 / span 2;
                grid-column: 1 / span 2;
            }

            // DZIADEK
            &-picture--4 {
                grid-row: 3;
                grid-column: 3;
            }


        }