1@media (max-width:576px) {
2
3    .hero-sm {
4        padding: 1rem 1rem
5    }
6
7    .hero-md {
8        padding: 2rem 1rem;
9    }
10
11    .hero-xl {
12        padding: 4rem 1rem;
13    }
14
15    .hero-lg {
16        padding: 3rem 1rem;
17    }
18
19}
20
21@media (min-width: 576px) {
22
23    .hero-sm {
24        padding: 1rem 1rem
25    }
26
27    .hero-md {
28        padding: 2rem 1rem;
29    }
30
31    .hero-lg {
32        padding: 3rem 1rem;
33    }
34
35    .hero-xl {
36        padding: 4rem 1rem;
37    }
38
39}
40
41@media (min-width: 768px) {
42
43    .hero-sm {
44        padding: 2rem 1rem;
45    }
46
47    .hero-md {
48        padding: 4rem 2rem;
49    }
50
51    .hero-lg {
52        padding: 6rem 3rem;
53    }
54
55    .hero-xl {
56        padding: 8rem 4rem;
57    }
58
59}
60