/home/bdqbpbxa/demo-subdomains/magnetiq.goodface.com.ua/css/adaptive.css
@media screen and (max-width: 1400px) {
/* Page name | .block-class-name */
}
@media screen and (max-width: 1260px) {
/* Page name | .block-class-name */
}
@media screen and (max-width: 1024px) {
/* Homepage | .hero */
main>section:first-child {
margin-top: clamp(70px, 18.462vw, 74px);
}
.hero {
padding: clamp(54px, 14.359vw, 58px) 0;
}
.hero .text {
margin-top: clamp(22px, 5.897vw, 24px);
max-width: 500px;
}
.hero .button-container {
margin-top: clamp(38px, 10.256vw, 42px);
gap: clamp(11px, 3.077vw, 13px);
}
.hero .title .multiple-img {
margin-top: clamp(-5px, -1.282vw, -6px);
}
.multiple-img .img {
height: clamp(38px, 10.256vw, 42px);
}
/* Homepage | partners-section */
.partners-section {
padding: clamp(38px, 10.256vw, 42px) 0 clamp(78px, 20.513vw, 82px) 0;
}
.partners-section .img {
height: clamp(38px, 10.256vw, 42px);
margin-right: clamp(62px, 16.410vw, 66px);
}
.partners-section .img img {
display: block;
height: 100%;
width: auto;
}
/* Homepage | pinned-section */
.pinned-section .container {
padding: clamp(38px, 10.256vw, 42px) 0;
}
.pinned-section .container .title {
margin-top: clamp(15px, 4.103vw, 17px);
;
}
.pinned-section .pinned-slider__wrapper {
padding: clamp(19px, 5.128vw, 21px);
}
.pinned-slider {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(38px, 10.256vw, 42px);
}
.pinned-slider__card {
position: relative;
margin: 0;
pointer-events: auto;
overflow: hidden;
opacity: 1;
pointer-events: auto;
}
.pinned-slider__card.-animated .pinned-slider__card-wrapper {
pointer-events: auto;
}
.pinned-slider__card:not(:first-child) {
position: relative;
}
.pinned-slider__card-wrapper {
height: auto;
transform: none;
max-height: none;
}
.section-title .img {
height: clamp(35px, 9.231vw, 37px);
margin: 0;
}
.section-title .img.-middle {
height: clamp(30px, 8.205vw, 34px);
margin: clamp(-3px, -1.026vw, -5px) clamp(-3px, -1vw, -4px) 0 0;
}
.section-title .img.-small {
height: clamp(24px, 6.667vw, 28px);
margin: clamp(-2px, -0.769vw, -4px) clamp(-1px, -0.513vw, -3px) 0 clamp(0.5px, 0.256vw, 1.5px);
}
.section-title .img.-middle-mob {
height: clamp(30px, 8.205vw, 34px) !important;
}
/* Homepage | industries-section */
.industries-section {
padding: clamp(118px, 30.769vw, 122px) 0 clamp(38px, 10.256vw, 42px) 0;
}
.industries-section .section-title {
margin-top: clamp(15px, 4.103vw, 17px);
}
.industries-section .section-title+.text {
color: var(--Black-70);
margin-top: clamp(15px, 4.103vw, 17px);
}
.industries-section .carousel-slider {
margin: clamp(38px, 10.256vw, 42px) auto 0 auto;
padding: 0;
max-width: 450px;
}
.carousel-slider .swiper-wrapper {
padding: clamp(23px, 6.154vw, 25px) 0;
}
.carousel-slider .swiper-pagination {
margin-top: clamp(38px, 10.256vw, 42px);
}
.carousel-slider .swiper-slide {
width: 65%;
}
.swiper-pagination {
border-radius: clamp(38px, 10.256vw, 42px);
padding: clamp(6px, 1.795vw, 8px);
gap: clamp(5px, 1.538vw, 7px);
}
.swiper-pagination .swiper-pagination-bullet {
width: clamp(5px, 1.538vw, 7px);
height: clamp(5px, 1.538vw, 7px);
}
/* Homepage | expirience-section */
.expirience-section {
padding: 20.513vw
/*80px*/
0 clamp(118px, 30.769vw, 122px) 0;
}
.expirience-section .section-title {
margin-top: clamp(12px, 3.333vw, 14px);
}
.expirience-section .statistic-list {
margin: clamp(38px, 10.256vw, 42px) 0;
}
.statistic-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(38px, 10.256vw, 42px);
}
.statistic-list .col {
grid-column: span 2;
gap: clamp(15px, 4.103vw, 17px);
}
.expirience-section .button {
margin-top: clamp(31px, 8.205vw, 33px);
width: fit-content;
}
/* Homepage | sticky-part-section */
.sticky-part-section {
padding: clamp(118px, 30.769vw, 122px)
/*120px*/
0;
}
.sticky-part-section__wrapper {
gap: clamp(38px, 10.256vw, 42px)
/*40px*/
;
}
.sticky-part-section__fixed {
top: clamp(146px, 38.462vw, 154px);
}
.sticky-part-section__fixed .section-title {
margin-top: clamp(15px, 4.103vw, 17px);
}
.sticky-part-section__fixed .text {
margin-top: clamp(15px, 4.103vw, 17px);
max-width: 400px;
}
.sticky-part-section__relative {
width: 50%;
min-width: 50%;
}
.sticky-part-section__relative .benefit-card+.benefit-card {
margin-top: clamp(38px, 10.256vw, 42px)
/*40px*/
;
}
.benefit-card .img {
width: clamp(54px, 14.359vw, 58px);
}
.benefit-card .title {
margin-top: clamp(23px, 6.154vw, 25px);
}
.benefit-card .text {
margin-top: clamp(11px, 3.077vw, 13px);
max-width: clamp(280px, 71.795vw, 350px);
}
.sticky-part-section .button {
margin-top: clamp(38px, 10.256vw, 42px);
}
/* Homepage | background-video-section */
.background-video-wrapper {
border-radius: clamp(15px, 4.103vw, 17px);
padding: clamp(180px, 51.538vw, 210px) clamp(19px, 5.128vw, 21px);
}
.background-video-wrapper .title {
margin-top: clamp(14px, 3.846vw, 16px);
}
/* Homepage | customer-reviews-wrapper */
.customer-reviews-wrapper {
padding: clamp(78px, 20.513vw, 82px) clamp(18px, 5.128vw, 22px);
border-radius: clamp(15px, 4.103vw, 17px);
}
.customer-reviews-wrapper .section-title {
margin-top: clamp(15px, 4.103vw, 17px);
}
.reviews-slider {
margin-top: clamp(38px, 10.256vw, 42px);
}
.reviews-slider .swiper-navigation {
display: none;
}
.review-card {
padding: clamp(15px, 4.103vw, 17px);
border-radius: clamp(7px, 2.051vw, 9px);
}
.reviews-slider .swiper-slide {
width: 100%;
}
.review-card .title {
padding-top: clamp(39px, 10.513vw, 43px);
margin-bottom: clamp(38px, 10.256vw, 42px);
}
.review-card .title:before {
width: clamp(22px, 6.154vw, 26px);
height: clamp(15px, 4.359vw, 19px);
}
.review-card .logo {
height: clamp(38px, 10.256vw, 42px);
}
.reviews-slider .swiper-pagination {
margin: clamp(38px, 10.256vw, 42px) auto 0 auto;
}
/* Homepage | news-section */
.news-section {
padding: clamp(118px, 30.769vw, 122px)
/*120px*/
0 clamp(62px, 16.410vw, 66px) 0;
overflow: hidden;
}
.news-section__wrapper {
gap: clamp(15px, 4.359vw, 19px);
flex-direction: column;
}
.news-section__wrapper-left {
position: relative;
top: auto;
width: 100%;
min-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.news-section__wrapper-left .title {
margin-top: clamp(15px, 4.359vw, 19px);
}
.news-section__wrapper-left .button {
display: none;
}
.news-section__wrapper-right.-pc {
display: none;
;
}
.mobile-slider {
width: 100%;
margin-top: clamp(38px, 10.256vw, 42px);
display: block;
overflow: visible;
}
.mobile-slider .swiper-pagination {
margin: clamp(38px, 10.256vw, 42px) auto 0 auto;
}
.news-section__wrapper .button {
margin-top: clamp(38px, 10.256vw, 42px);
}
/* Homepage | upcoming-events */
.upcoming-events {
margin: clamp(62px, 16.410vw, 66px) 0 clamp(118px, 30.769vw, 122px) 0;
}
.upcoming-events .section-title {
margin-top: clamp(15px, 4.103vw, 17px);
}
.upcoming-events .event-list {
margin-top: clamp(38px, 10.256vw, 42px);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(7px, 2.051vw, 9px);
}
.upcoming-events .event-list .event-card {
width: 100%;
}
.upcoming-events .button {
margin-top: clamp(38px, 10.256vw, 42px);
}
/* Homepage | team-section */
/* Homepage | team-section */
.team-section {
padding: clamp(118px, 30.769vw, 122px) 0 clamp(118px, 30.769vw, 122px)
/*clamp(15px, 4.103vw, 17px)*/
0;
overflow: hidden;
}
.team-section .section-title {
margin-top: clamp(15px, 4.103vw, 17px);
}
.team-grid {
margin-top: clamp(38px, 10.256vw, 42px);
}
.team-grid {
flex-direction: column;
}
.team-grid__col {
grid-template-columns: repeat(5, 1fr);
width: 100%;
}
.team-member.-icon img {
width: clamp(23px, 6.154vw, 25px);
}
.team-grid__col.-pc {
display: none !important;
}
.team-grid__col.-mob {
display: grid !important;
}
.team-grid__col.-second-rounded .team-member:nth-child(2n+1) {
border-radius: 50%;
}
.team-grid__col.-first-rounded .team-member {
border-radius: 0 !important;
}
.team-grid .video {
position: relative;
width: 100%;
aspect-ratio: 390/240;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
display: none;
}
.team-grid .video video {
height: auto;
object-fit: cover;
width: 240%;
}
.team-grid .video>* {
position: absolute !important;
padding: 0 !important;
width: 100%;
height: 100%;
}
.team-grid .static-img {
display: block;
position: relative;
z-index: -1;
width: 100%;
aspect-ratio: 390/240;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.team-grid .static-img img {
display: block;
width: 100%;
}
.team-section .text-container {
max-width: 600px;
width: 100%;
margin: clamp(38px, 10.256vw, 42px) auto 0 auto;
padding: 0 clamp(19px, 5.128vw, 21px);
}
.team-section .text-container p+p {
margin-top: clamp(15px, 4.103vw, 17px);
}
.team-section .text-container .text {
color: var(--black-70, rgba(0, 0, 0, 0.70));
padding-right: 0;
}
.pinned-video {
margin-top: clamp(118px, 30.769vw, 122px);
height: auto;
}
.pinned-video__inner {
border-radius: clamp(15px, 4.103vw, 17px);
clip-path: inset(0 0 0 0 round clamp(15px, 4.103vw, 17px));
transform: scale(1);
max-height: none;
}
.pinned-video video {
height: auto;
max-height: none;
}
.play-button {
border-radius: clamp(78px, 20.513vw, 82px);
padding: clamp(3px, 1.026vw, 5px) clamp(15px, 4.103vw, 17px) clamp(3px, 1.026vw, 5px) clamp(3px, 1.026vw, 5px);
gap: clamp(15px, 4.103vw, 17px);
}
.play-button .arrow {
width: clamp(46px, 12.308vw, 50px);
}
.video-toolbar {
bottom: clamp(15px, 4.103vw, 17px);
border-radius: clamp(78px, 20.513vw, 82px);
padding: clamp(3px, 1.026vw, 5px);
gap: clamp(3px, 1.026vw, 5px);
}
.video-toolbar>* {
width: clamp(46px, 12.308vw, 50px);
}
.video-toolbar .fullScreen:before,
.video-toolbar .mute:after,
.video-toolbar .mute:before,
.video-toolbar .play:after,
.video-toolbar .play:before {
height: clamp(19px, 5.128vw, 21px);
width: clamp(19px, 5.128vw, 21px);
}
.video-toolbar .fullScreen {
display: flex;
}
/* Homepage | code-section */
.code-section__wrapper {
border-radius: clamp(15px, 4.103vw, 17px)
/*16px*/
;
padding: clamp(38px, 10.256vw, 42px) clamp(1px, 5.128vw, 21px);
gap: clamp(38px, 10.256vw, 42px);
flex-direction: column-reverse;
}
.code-section__wrapper-left {
width: 100%;
min-width: 100%;
}
.code-section__wrapper-left .button.-mob {
margin-top: clamp(38px, 10.256vw, 42px);
display: flex;
}
.code-example {
aspect-ratio: 350/440;
border-radius: clamp(7px, 2.051vw, 9px);
}
.code-section__wrapper-right .title {
margin-top: clamp(15px, 4.103vw, 17px)
/*16px*/
;
}
.code-section__wrapper-right .text {
margin-top: clamp(15px, 4.103vw, 17px)
/*16px*/
;
}
.code-section__wrapper-right .button {
display: none;
}
.code-example__tabs {
height: 100%;
max-height: calc(100% - clamp(58px, 15.385vw, 62px));
overflow: hidden;
}
.code-example__item-inner {
overflow: auto;
}
.code-for-copy {
padding: clamp(15px, 4.103vw, 17px)
/*16px*/
;
width: fit-content;
}
.code-example__menu {
padding: clamp(15px, 4.103vw, 17px)
/*16px*/
;
height: clamp(58px, 15.385vw, 62px);
min-height: clamp(58px, 15.385vw, 62px);
overflow: auto;
}
.code-example__menu-inner {
gap: clamp(3px, 1.026vw, 5px);
}
.code-example__menu-item {
border-radius: clamp(38px, 10.256vw, 42px);
height: clamp(27px, 7.179vw, 29px);
min-width: clamp(78px, 20.513vw, 82px);
padding: 0 clamp(9px, 2.564vw, 11px) clamp(0.5px, 0.256vw, 1.5px) clamp(9px, 2.564vw, 11px);
}
body.-apple .code-example__menu-item .arrow {
margin-top: -1px;
}
body.-apple .code-example__menu-item {
padding-top: 2px;
padding-bottom: 0;
}
.code-example .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
top: clamp(7px, 2.051vw, 9px);
width: clamp(2px, 0.769vw, 4px);
}
.code-example .os-theme-dark>.os-scrollbar-horizontal,
.code-example .os-theme-light>.os-scrollbar-horizontal {
height: clamp(2px, 0.769vw, 4px);
left: 0;
}
.code-example .os-theme-dark>.os-scrollbar,
.code-example .os-theme-light>.os-scrollbar {
padding: 0;
}
.code-example__item .copy-button {
right: clamp(15px, 4.103vw, 17px);
top: clamp(15px, 4.103vw, 17px);
}
}
@media screen and (max-width: 759px) {
/* Homepage | .hero */
.hero .button-container {
flex-direction: column;
width: 100%;
}
.hero .button-container .button {
width: 100%;
}
/* Homepage | expirience-section */
.statistic-list {
display: flex;
flex-direction: column;
}
.expirience-section .button {
width: 100%;
}
/* Homepage | sticky-part-section */
.sticky-part-section__wrapper {
flex-direction: column;
}
.sticky-part-section__fixed {
position: relative;
top: auto;
}
.sticky-part-section__relative {
width: 100%;
min-width: 100%;
}
.sticky-part-section .button.-mob {
display: flex;
margin-top: 0;
width: 100%;
}
.sticky-part-section .button.-pc {
display: none;
}
/* Homepage | pinned-section */
.pinned-slider {
display: flex;
flex-direction: column;
}
}