1 $group
2 . ag-format-container
3 width 1142px
4 margin 0 auto
5 < body
6 background-color #000
7 . ag-courses_box
8 display -webkit-box
9 display -ms-flexbox
10 display flex
11 -webkit-box-align start
12 -ms-flex-align start
13 align-items flex-start
14 -ms-flex-wrap wrap
15 flex-wrap wrap
16 padding 50px 0
17 . ag-courses_item
18 -ms-flex-preferred-size calc(33.33333% - 30px)
19 flex-basis calc(33.33333% - 30px)
20 margin 0 15px 30px
21 overflow hidden
22 border-radius 28px
23 . ag-courses-item_link
24 display block
25 padding 30px 20px
26 background-color #121212
27 overflow hidden
28 position relative
29 . ag-courses-item_link:hover
30 + .ag-courses-item_link:hover .ag-courses-item_date
31 text-decoration none
32 color #FFF
33 . ag-courses-item_link:hover .ag-courses-item_bg
34 -webkit-transform scale(10)
35 -ms-transform scale(10)
36 transform scale(10)
37 . ag-courses-item_title
38 min-height 87px
39 margin 0 0 25px
40 overflow hidden
41 font-weight bold
42 font-size 30px
43 color #FFF
44 z-index 2
45 position relative
46 . ag-courses-item_date-box
47 font-size 18px
48 color #FFF
49 z-index 2
50 position relative
51 . ag-courses-item_date
52 font-weight bold
53 color #f9b234
54 -webkit-transition color .5s ease
55 -o-transition color .5s ease
56 transition color .5s ease
57 . ag-courses-item_bg
58 height 128px
59 width 128px
60 background-color #f9b234
61 z-index 1
62 position absolute
63 top -75px
64 right -75px
65 border-radius 50%
66 -webkit-transition all .5s ease
67 -o-transition all .5s ease
68 transition all .5s ease
69 . ag-courses_item:nth-child(2n) .ag-courses-item_bg
70 background-color #3ecd5e
71 . ag-courses_item:nth-child(3n) .ag-courses-item_bg
72 background-color #e44002
73 . ag-courses_item:nth-child(4n) .ag-courses-item_bg
74 background-color #952aff
75 . ag-courses_item:nth-child(5n) .ag-courses-item_bg
76 background-color #cd3e94
77 . ag-courses_item:nth-child(6n) .ag-courses-item_bg
78 background-color #4c49ea
79 media only screen and (max-width: 979px)
80 . ag-courses_item
81 -ms-flex-preferred-size calc(50% - 30px)
82 flex-basis calc(50% - 30px)
83 . ag-courses-item_title
84 font-size 24px
85 media only screen and (max-width: 767px)
86 . ag-format-container
87 width 96%
88 media only screen and (max-width: 639px)
89 . ag-courses_item
90 -ms-flex-preferred-size 100%
91 flex-basis 100%
92 . ag-courses-item_title
93 min-height 72px
94 line-height 1
95 font-size 24px
96 . ag-courses-item_link
97 padding 22px 40px
98 . ag-courses-item_date-box
99 font-size 16px