@layer addon {

    .templateIllustratie {
        .inner {
            .title, .content {
                color: var(--color1);
            }
        }
        @media (min-width: 56em) {
            .media {
                grid-column: 8 / span 5;
                grid-row: 1;
                img {
                    height: auto;
                }
            }
            .inner {
                grid-row: 1;
                &:first-of-type {
                    grid-column: 1 / span 7;
                    padding-top: calc(var(--section) / 2);
                }

                &:last-of-type {
                    grid-column: 7 / span 6;
                    grid-row: 2;
                }
            }
        }
        @media (--min-fablet) {
            .media {
                grid-column: 8 / span 5;
                grid-row: 1;
                img {
                    height: auto;
                }
            }
            .inner {
                grid-row: 1;
                &:first-of-type {
                    grid-column: 1 / span 7;
                    padding-top: calc(var(--section) / 2);
                }

                &:last-of-type {
                    grid-column: 7 / span 6;
                    grid-row: 2;
                }
            }
        }

    }
}