1<template>
2 <div class="item">
3 <i>
4 <slot name="icon"></slot>
5 </i>
6 <div class="details">
7 <h3>
8 <slot name="heading"></slot>
9 </h3>
10 <slot></slot>
11 </div>
12 </div>
13</template>
14
15<style scoped>
16.item {
17 margin-top: 2rem;
18 display: flex;
19 position: relative;
20}
21
22.details {
23 flex: 1;
24 margin-left: 1rem;
25}
26
27i {
28 display: flex;
29 place-items: center;
30 place-content: center;
31 width: 32px;
32 height: 32px;
33
34 color: var(--color-text);
35}
36
37h3 {
38 font-size: 1.2rem;
39 font-weight: 500;
40 margin-bottom: 0.4rem;
41 color: var(--color-heading);
42}
43
44@media (min-width: 1024px) {
45 .item {
46 margin-top: 0;
47 padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
48 }
49
50 i {
51 top: calc(50% - 25px);
52 left: -26px;
53 position: absolute;
54 border: 1px solid var(--color-border);
55 background: var(--color-background);
56 border-radius: 8px;
57 width: 50px;
58 height: 50px;
59 }
60
61 .item:before {
62 content: " ";
63 border-left: 1px solid var(--color-border);
64 position: absolute;
65 left: 0;
66 bottom: calc(50% + 25px);
67 height: calc(50% - 25px);
68 }
69
70 .item:after {
71 content: " ";
72 border-left: 1px solid var(--color-border);
73 position: absolute;
74 left: 0;
75 top: calc(50% + 25px);
76 height: calc(50% - 25px);
77 }
78
79 .item:first-of-type:before {
80 display: none;
81 }
82
83 .item:last-of-type:after {
84 display: none;
85 }
86}
87</style>