Collection circles

1<div class='section-template--16651111629049__1663859377890f7915-settings'>
2 <div class='circle-slider-wrapper-template--16651111629049__1663859377890f7915'>
3  <div class='swiper circle-slider-template--16651111629049__1663859377890f7915 preview'>
4   <div class='swiper-wrapper'>
5    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
6     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/snow-peak-titanium-single-wall-cup'>
7      <img alt='' src='//section.store/cdn/shop/products/mug.jpg?v=1663855357'/>
8     </a>
9     <p class='circle-text-template--16651111629049__1663859377890f7915'>
10      Mugs
11     </p>
12    </div>
13    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
14     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/5-panel-hat'>
15      <img alt='' src='//section.store/cdn/shop/files/5-panel-hat_4ee20a27-8d5a-490e-a2fc-1f9c3beb7bf5.webp?v=1663859540'/>
16     </a>
17     <p class='circle-text-template--16651111629049__1663859377890f7915'>
18      Hats
19     </p>
20    </div>
21    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
22     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/camp-stool'>
23      <img alt='' src='//section.store/cdn/shop/files/campstool-1.webp?v=1663859592'/>
24     </a>
25     <p class='circle-text-template--16651111629049__1663859377890f7915'>
26      Stools
27     </p>
28    </div>
29    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
30     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/canvas-lunch-bag'>
31      <img alt='' src='//section.store/cdn/shop/files/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1663859624'/>
32     </a>
33     <p class='circle-text-template--16651111629049__1663859377890f7915'>
34      Bags
35     </p>
36    </div>
37    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
38     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/foraker-canvas-coat'>
39      <img alt='' src='//section.store/cdn/shop/files/woolfill-jacket_6c39ae23-c0c8-4821-85f4-4b5d64333c62.webp?v=1663859701'/>
40     </a>
41     <p class='circle-text-template--16651111629049__1663859377890f7915'>
42      Jackets
43     </p>
44    </div>
45    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
46     <div class='circle-icon-template--16651111629049__1663859377890f7915'>
47      <img alt='' src='//section.store/cdn/shop/products/1_637c75a8-33f9-4c38-aebf-5a3dc31162dc.png?v=1706026914'/>
48     </div>
49     <p class='circle-text-template--16651111629049__1663859377890f7915'>
50      Throws
51     </p>
52    </div>
53    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
54     <div class='circle-icon-template--16651111629049__1663859377890f7915'>
55      <img alt='' src='//section.store/cdn/shop/products/2_c196c504-dfa8-41e9-b151-1094c4962009.png?v=1706026914'/>
56     </div>
57     <p class='circle-text-template--16651111629049__1663859377890f7915'>
58      Rugs
59     </p>
60    </div>
61   </div>
62  </div>
63 </div>
64</div>
65<style>
66    .circle-icon-template--16651111629049__1663859377890f7915,
67    .circle-icon-template--16651111629049__1663859377890f7915 img,
68    .circle-icon-template--16651111629049__1663859377890f7915 svg {
69      border-radius: 50%;
70    }
71
72    .circle-icon-template--16651111629049__1663859377890f7915 img,
73    .circle-icon-template--16651111629049__1663859377890f7915 svg {
74      border-radius: 50%;
75    }
76    
77  </style><style>
78    .circle-icon-template--16651111629049__1663859377890f7915 {
79      background-image: linear-gradient(133deg, rgba(250, 220, 54, 1) 11%, rgba(254, 98, 146, 1) 49%, rgba(250, 220, 54, 1) 87%);
80      border: 0px;
81      padding: 2px;
82    }
83  </style><style>@font-face {
84  font-family: 'Josefin Sans';
85  font-weight: 400;
86  font-style: normal;
87  font-display: swap;
88  src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
89       url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
90}
91
92
93  .section-template--16651111629049__1663859377890f7915 {
94    border-top: solid #000000 0px;
95    border-bottom: solid #000000 0px;
96    margin-top: 0px;
97    margin-bottom: 0px;
98    overflow: hidden;
99  }
100  
101  .section-template--16651111629049__1663859377890f7915-settings {
102    margin: 0 auto;
103    padding-top: 27px;
104    padding-bottom: 27px;
105    padding-left: 1.5rem;
106    padding-right: 1.5rem;
107  }
108
109  .circle-slider-wrapper-template--16651111629049__1663859377890f7915 {
110    margin: 0px auto;
111    width: 100%;
112  }
113
114  .circle-slider-template--16651111629049__1663859377890f7915 {
115    margin: 0px auto;
116    width: 100% !important;
117    max-width: fit-content !important;
118    overflow:visible;
119  }
120
121  .circle-item-template--16651111629049__1663859377890f7915 {
122    width: 100%;
123    max-width: 66px;
124    box-sizing: border-box;
125  }
126
127  .circle-item-template--16651111629049__1663859377890f7915:last-child {
128    margin-right: 0!important;
129  }
130
131  .circle-icon-template--16651111629049__1663859377890f7915 {
132    margin: 0px auto;
133    display: block;
134    width: 66px;
135    height: 66px;
136    border: 2px solid #000000;
137    overflow: hidden;
138  }
139
140  .circle-icon-template--16651111629049__1663859377890f7915 img,
141  .circle-icon-template--16651111629049__1663859377890f7915 svg {
142    display: block;
143    width: 100%;
144    height: 100%;
145    object-fit: cover;
146    border: 4px solid #ffffff;
147  }
148
149  .circle-icon-template--16651111629049__1663859377890f7915 svg {
150    background-color: #DADADA;
151  }
152
153  .circle-text-template--16651111629049__1663859377890f7915 {
154    margin: 0;
155    margin-top: 6px;
156    font-size: 10px;
157    color: #121212;
158    line-height: 130%;
159    text-transform: unset;
160    word-wrap: break-word;
161    text-align: center;
162  }
163
164  .circle-item-template--16651111629049__1663859377890f7915 {
165    box-sizing: border-box !important;
166  }
167
168  @media screen and (min-width: 1024px) {
169    
170    .section-template--16651111629049__1663859377890f7915 {
171      margin-top: 0px;
172      margin-bottom: 0px;
173    }
174    
175    .section-template--16651111629049__1663859377890f7915-settings {
176      padding: 0 5rem;
177      padding-top: 36px;
178      padding-bottom: 36px;
179      padding-left: 0rem;
180      padding-right: 0rem;
181    }
182
183    .circle-item-template--16651111629049__1663859377890f7915 {
184      max-width: 100px;
185    }
186
187    .circle-icon-template--16651111629049__1663859377890f7915 {
188      width: 100px;
189      height: 100px;
190    }
191
192    .circle-icon-template--16651111629049__1663859377890f7915 img,
193    .circle-icon-template--16651111629049__1663859377890f7915 svg {
194      border: 4px solid #ffffff;
195    }
196
197    .circle-text-template--16651111629049__1663859377890f7915 {
198      margin-top: 8px;
199      font-size: 12px;
200    }
201
202    .circle-slider-wrapper-template--16651111629049__1663859377890f7915 {
203      max-width: 100%;
204    }
205    
206  }</style><style>
207  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .swiper-wrapper {
208    display: flex;
209    align-items: top;
210    justify-content: space-between;
211    overflow: hidden;
212  }
213
214  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q {
215    width: 40%;
216  }
217
218  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q:not(:first-child) {
219    margin-left: 16px;
220  } 
221
222  @media(min-width: 1024px) {
223    .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q:not(:first-child) {
224      margin-left: 16px;
225    } 
226
227  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q {
228    overflow:hidden;
229  }
230
231    .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q {
232      width: 15%;
233    }
234  }
235</style><style>
236  .circle-slider-template--16651111629049__1663859377890f7915.preview .swiper-wrapper {
237    display: flex;
238    align-items: top;
239    justify-content: space-between;
240    overflow: hidden;
241  }
242
243  .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915 {
244    width: 40%;
245  }
246
247  .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915:not(:first-child) {
248    margin-left: 16px;
249  } 
250
251  @media(min-width: 1024px) {
252    .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915:not(:first-child) {
253      margin-left: 16px;
254    } 
255
256  .circle-slider-template--16651111629049__1663859377890f7915 {
257    overflow:hidden;
258  }
259
260    .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915 {
261      width: 15%;
262    }
263  }
264</style>