1  .section {
 2    margin: 40px 0;
 3    font-size: 24px;
 4  
 5    @media screen and (max-width: 768px) {
 6      margin: 0;
 7    }
 8  }
 9  .section {
10    h2 {
11      margin-bottom: 30px;
12  
13      @media screen and (max-width: 768px) {
14        font-size: 30px;
15        text-align: center;
16      }
17    }
18  
19    &__templates {
20      display: flex;
21      justify-content: space-between;
22      align-items: center;
23    }
24  }
25  
26  .grid__wrapper {
27    display: grid;
28    grid-template-columns: 1fr 1fr 1fr 1fr;
29    grid-template-rows: 300px;
30    gap: 15px;
31    padding: 10px;
32  
33    @media screen and (max-width: 915px) {
34      grid-template-columns: 1fr 1fr 1fr;
35    }
36  
37    @media screen and (max-width: 768px) {
38      display: flex;
39      flex-direction: column;
40      gap: 20px;
41      background-color: unset;
42    }
43  
44    .template {
45      width: 100%;
46      height: 100%;
47      text-align: center;
48      margin: auto;
49      background-color: rgba(255, 255, 255, 0.8);
50    }
51    .templateImg {
52      width: 100%;
53      height: 100%;
54      -webkit-transition: all 0.5s ease-in-out;
55      -moz-transition: all 0.5s ease-in-out;
56      transition: all 0.5s ease-in-out;
57      border: 2px solid gray;
58      cursor: pointer;
59    }
60  
61    .templateImg:hover {
62      border: 2px solid rgb(0, 32, 96);
63    }
64  }
65  
66  /* HIDE RADIO */
67  .radio {
68    position: absolute;
69    opacity: 0;
70    width: 0;
71    height: 0;
72  }
73  
74  /* IMAGE STYLES */
75  .radio {
76    .img {
77      cursor: pointer;
78    }
79  }
80  
81  /* CHECKED STYLES */
82  .radio:checked + img {
83    outline: 2px solid rgb(0, 32, 96);
84  
85    &.templateImg {
86      border: 2px solid rgb(0, 32, 96);
87    }
88  }