@@ -97,4 +97,79 @@ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
97
97
.mg-social-link : hover ,
98
98
.mg-social-link : focus {
99
99
filter : brightness (120% );
100
+ }
101
+
102
+ .mg-card {
103
+ border : 1px solid;
104
+ border-color : var (--bs-body-color );
105
+ border-radius : .5rem ;
106
+ position : relative;
107
+ overflow : hidden;
108
+ height : 100% ;
109
+ }
110
+
111
+ .mg-card-thumbnail {
112
+ aspect-ratio : 16 / 9 ;
113
+ filter : brightness (100% );
114
+ border-radius : 7px ;
115
+ background-position : center;
116
+ background-size : cover;
117
+ background-repeat : no-repeat;
118
+ background-color : var (--bs-body );
119
+ -webkit-transition : filter 0.1s ease-in-out, transform 0.25s ease-in-out;
120
+ -moz-transition : filter 0.1s ease-in-out, transform 0.25s ease-in-out;
121
+ -ms-transition : filter 0.1s ease-in-out, transform 0.25s ease-in-out;
122
+ -o-transition : filter 0.1s ease-in-out, transform 0.25s ease-in-out;
123
+ transition : filter 0.1s ease-in-out, transform 0.25s ease-in-out;
124
+
125
+ }
126
+
127
+ .mg-card-thumbnail-overlay {
128
+ position : absolute;
129
+ width : 100% ;
130
+ height : 100% ;
131
+ top : 0 ;
132
+ left : 0 ;
133
+ right : 0 ;
134
+ bottom : 0 ;
135
+ z-index : 999 ;
136
+ background-repeat : no-repeat;
137
+ background-position : center center;
138
+ filter : drop-shadow (6px 6px 6px # 000C );
139
+ }
140
+
141
+ .mg-card : hover .mg-card-thumbnail ,
142
+ .mg-card : focus .mg-card-thumbnail {
143
+ filter : brightness (110% );
144
+ transform : scale (1.1 );
145
+ }
146
+
147
+ @media (prefers-reduced-motion) {
148
+ .mg-card : hover .mg-card-thumbnail ,
149
+ .mg-card : focus .mg-card-thumbnail {
150
+ transform : none;
151
+ }
152
+ }
153
+
154
+ .mg-card-body {
155
+ padding-inline : 2rem ;
156
+ padding-block : 1rem ;
157
+ }
158
+
159
+ .mg-card-title {
160
+ font-size : 22px ;
161
+ font-weight : 700 ;
162
+ }
163
+
164
+ .mg-card-excerpt {
165
+ display : -webkit-box;
166
+ -webkit-line-clamp : 3 ;
167
+ -webkit-box-orient : vertical;
168
+ overflow : hidden;
169
+ font-style : italic;
170
+ }
171
+
172
+ .mg-no-link {
173
+ text-decoration : none;
174
+ color : var (--bs-body-color );
100
175
}
0 commit comments