src/components/Webinars/Webinar/WebinarInfo/WebinarInfoStyles.tsx
import styled from "styled-components";
export const WebinarInfoStyles = styled.div`
.webinar-main-info {
.image-wrapper {
@media (max-width: 991px) {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 35px;
img {
display: block;
margin: 0 auto;
}
}
}
.labels-row {
display: flex;
justify-content: flex-start;
align-items: flex-start;
column-gap: 20px;
margin: 35px 0;
@media (max-width: 991px) {
margin: 35px 0 0;
}
@media (max-width: 374px) {
flex-direction: column;
row-gap: 16px;
}
&--bottom {
column-gap: 45px;
margin-top: 120px;
margin-bottom: 0;
flex-wrap: wrap;
@media (max-width: 991px) {
column-gap: 0;
margin-top: 55px;
}
@media (max-width: 374px) {
flex-direction: row;
}
.single-label {
@media (max-width: 991px) {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 20px;
}
}
}
}
}
`;