layer5/src/components/UpcomingEventCard/EventCard.style.js at 2ee1900f601a59daf2596804e7a1633a3991858c · layer5io/layer5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import styled from "styled-components";

const UpcomingEventsWrapper = styled.div`
	.blog-slider {
		width: 100%;
		position: relative;
		max-width: 50rem;
		margin: auto;
		background: ${props => props.theme.grey212121ToWhite};
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
		padding: 1rem;
		border-radius: 0.5rem;
		height: 39.5rem;
		overflow: auto;
		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.swiper-wrapper{
		height: 38rem
	}
	.blog-slider_img{
		max-height: 25rem;
		object-fit: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		.gatsby-image-wrapper {
		    width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				 max-height: 25rem;
				 object-fit: cover;
				 width: 100%;
			 }
	   }
	}
	.blog-slider_content{
		text-align: center;
		overflow: hidden;
		padding-bottom: 4rem;
	}

	.blog-slider_item {
		overflow-x: hidden;
		overflow-y: auto;

	}
	.blog-slider_item.swiper-slide::-webkit-scrollbar {
		width: 0;
	}

	.blog-slider_title {
		text-align: center;
		margin: 1rem auto 0.2rem;
	}

	.blog-slider_date {
		display: flex;
		color: ${props => props.theme.whiteSevenToBlackSeven};
		justify-content: flex-end;
		margin: 0;
		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.blog-slider_text {
		h2 {
			text-align: start;
			font-size: 1.25rem;
		}

		ul > li {
			text-align: start;
			list-style: disc;
		}
	}

	.blog-slider_description {
		padding-left: 0.625rem;
		font-size: 1.25rem;
	}

	.swiper-pagination-bullet {
		background: ${props => props.theme.secondaryColor};
		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.swiper-pagination {
		background: ${props => props.theme.grey212121ToWhite};
		padding-top: 0.8rem;
    margin-top: 1rem;
    margin-bottom: -1.2rem;
    padding-bottom: 0.8rem;
		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	@media (max-width: 720px) {
		.blog-slider_button {
			margin-bottom: 2rem;
		}

		.blog-slider {
			height: 38rem;
		}
	}

	@media (max-width: 420px) {
		.blog-slider_title {
			font-size: 1.75rem;
		}

		.blog-slider_text > h2 {
			font-size: 1.15rem;
		}

		.blog-slider {
			height: 35rem;
		}
	}
`;

export default UpcomingEventsWrapper;