.page-nav{width:100%;margin-top:440px;margin-left:auto;margin-right:auto;display:flex;justify-content:center;.nav { justify-content: center; .nav-item { border-right: solid 2px #4d4d4d; &:last-child { border-right: none; } .nav-link { font-size: 24px; color: #4d4d4d; text-decoration: none; } .active { font-weight: 800; } } }}.steps-section{position:relative;width:100%;margin-left:auto;margin-right:auto;margin-bottom:var(--space);.steps-container { display: none; } .step-card { color: #fbfcf7; width: 100%; max-width: 1200px; max-height: 500px; margin-top: var(--space-sm); padding: var(--space); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 32px; gap: 3rem; .mobile { display: none; } } .create-card { position: sticky; top: 20%; z-index: 10; background-image: url(/how-it-works/img/1_orange.png); text-align: center; .create-card-steps { color: #fe7028; margin-top: 40px; margin-left: auto; margin-right: auto; width: 100%; height: 100%; max-width: 916px; max-height: 57px; background-image: url(/how-it-works/img/create_your_event.png); background-repeat: no-repeat; background-size: 100% 100%; .desktop { .col { h5 { font-size: 22px; line-height: 240%; } } } } } .promote-card { padding: calc(1.3 * var(--space)); position: sticky; top: 21%; z-index: 20; background-image: url(/how-it-works/img/2_blue.png); .d-flex { padding-top: 40px; } .details { max-width: 60%; h4 { line-height: 130%; } } } .prepare-card { padding: calc(1.5 * var(--space-sm)); position: sticky; top: 22%; z-index: 30; background-image: url(/how-it-works/img/3_green.png); img { width: 100%; height: auto; max-width: 450px; border-radius: 32px; } .card-text { width: 60%; padding-top: 60px; .details { padding-top: 20px; } } } .live-card { padding: calc(1.2 * var(--space-xs)); position: relative; margin: var(--space-sm) auto 0; z-index: 40; background-image: url(/how-it-works/img/4_purple.png); padding-right: 0px; img { height: auto; max-width: 638px; } .card-text { padding-top: 80px; padding-left: 40px; } }}@media only screen and (max-width:700px){.page-hero{.page-hero-bg { padding-top: 120px; padding-bottom: 80px; }}.page-nav{margin-top:260px;.nav { .nav-item { border-right: solid 1px #4d4d4d; &:last-child { border-right: none; } .nav-link { font-size: 14px; color: #4d4d4d; text-decoration: none; } } }}}@media only screen and (max-width:1200px){h2{font-family:var(--font-heading);font-weight:900;font-size:28px;line-height:110%}h4{font-family:var(--font-primary);font-weight:700;font-size:18px;line-height:110%}h5{font-family:var(--font-primary);font-weight:700;font-size:16px;line-height:120%}.steps-section{.step-card { width: 350px !important; height: 375px !important; padding: 16px; .desktop { display: none !important; } .mobile { display: block !important; } } .create-card { background-image: url(/how-it-works/img/1_orange_mobile.png); padding-top: 40px; .create-card-steps { margin: auto; margin-top: 20px; width: 294px; height: 158px; max-width: 294px; max-height: 158px; background-image: url(/how-it-works/img/create_your_event_mobile.png); .mobile { h5 { line-height: 300%; } } } } .promote-card { background-image: url(/how-it-works/img/2_blue_mobile.png); display: block !important; .d-flex { text-align: center; padding-top: 40px; } .details { text-align: center; max-width: 100%; padding-top: 40px; } } .prepare-card { background-image: url(/how-it-works/img/3_green_mobile.png); display: block !important; .card-text { padding-top: 10px !important; text-align: center; width: 100%; .details { padding-top: 10px; } } } .live-card { position: sticky; top: 23%; background-image: url(/how-it-works/img/4_purple_mobile.png); display: block !important; .card-text { padding-top: 10px !important; padding-left: 0; text-align: center; } img { height: auto; max-width: 282px; } }}}