CSS Background Clip

1.clip {
2  -webkit-text-fill-color: transparent;
3  -webkit-background-clip: text;
4  background-repeat: no-repeat;
5  background-size: 100%;
6  font-weight: 900;
7  line-height: normal;
8  margin-bottom: 1rem;
9  @screen md {
10    font-size: 4.8rem;
11  }
12}
13
14.pemberton {
15  composes: clip;
16  background-image: url('/six/pemberton-flowers.jpeg');
17  background-position:  
18}
19
20.iceland {
21  composes: clip;
22  background-image: url('/six/iceland.jpeg');
23  background-position: center 80%;
24}
25
26.skybridge {
27  composes: clip;
28  background-image: url('/six/skybridge.jpg');
29  background-position: left 40%;
30}
31
32.train {
33  composes: clip;
34  background-image: url('/six/trainwreck.jpg');
35}

1<h2 className={css.pemberton}>Pemberton Sunflowers</h2>
2<h2 className={css.iceland}>Iceland Roadtrip</h2>
3<h2 className={css.skybridge}>Whistler Skybridge</h2>
4<h2 className={css.train}>Trainwreck Trail</h2>