@media (min-width:43.75rem){ [class~="wrapper"]{ width: 90%; } [class~="media"] { display: none; } body{ overflow-x: hidden; } [class~="header-image-about"]{ transform-origin: right; animation: heroImg linear; animation-timeline: view(); animation-range: exit; } [class~="about-us-description-container"]{ animation: flexOpen ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="about-description-desc"], [class~="about-description-title"]{ animation: fadeOut ease-in-out backwards; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="collab"] img{ animation: fadeIn ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="desc-advantages-container"]{ animation: advantageOpen ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="sub-title"], [class~="desc-quotes"], [class~="desc-footer-text"], [class~="desc-headline"]{ background: linear-gradient(90deg, black, transparent); background-size: 200%; animation: reveal both linear; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; background-clip: text; -webkit-background-clip: text; color: transparent; background-repeat: no-repeat; } [class~="reason"]{ animation: advantageOpen ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="sigiers-container"]{ animation: sigiersOpen ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="sigiers-row"]{ animation: sigiersOpen ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } } @media (max-width: 56.25rem){ [class~="about-description-title"]{ font-size: 2.5rem; text-align: center; } [class~="header"]{ margin-bottom: 0; } [class~="header"] [class~="wrapper"]{ height: auto; } [class~="about-description-desc"]{ display: none; } [class~="about-us-description-container"]{ flex-wrap: wrap; scale: 0.6; } [class~="about-us-description-content-desc-1"]{ font-size: 1.875rem; } [class~="collab"] { width: 80%; } [class~="collab"] img{ width: 100%; } [class~="sub-title"]{ font-size: 1.125rem; } [class~="desc-advantage-content"] p{ display: none; } [class~="desc-advantage-content"] img{ width: 70%; filter: grayscale(0%); } [class~="desc-advantage-content"] h2{ font-size: 1.25rem; width: 100%; } [class~="advantages"]{ display: flex; flex-direction: row; animation: slideImages 10s linear infinite; gap: 1.875rem; } [class~="desc-advantage-content"]{ width: 7.5rem; } [class~="desc-advantages-container"]{ margin-left: 1.875rem; gap: 1.875rem; } [class~="adv"]{ display: flex; flex-direction: row; position: relative; overflow-x: hidden; } [class~="desc"]{ } [class~="adv"]:before{ position: absolute; content: ""; width: 1.875rem; height: 100%; top: 0; z-index: 2; left: 0; background: linear-gradient(to left,rgba(255, 255, 255, 0) ,white); } [class~="adv"]:after{ position: absolute; content: ""; width: 1.875rem; height: 100%; top: 0; z-index: 2; right: 0; background: linear-gradient(to right,rgba(255, 255, 255, 0) ,white); } [class~="desc-headline"]{ scale: 80%; } [class~="reason"]{ } [class~="reasons"]{ display: flex; flex-direction: row; gap: 4.375rem; overflow-x: auto; } [class~="reason-container"]{ width: 15.625rem; min-height: 15.625rem; } [class~="reason-container-title"]{ font-size: 2.1875rem; } [class~="reason-container-description"]{ font-size: 1.25rem; } [class~="sigiers-container"]{ flex-direction: row; align-items: flex-start; animation: slideImages 25s linear infinite; margin-left: 2.5rem; } [class~="sigiers-row"]{ display: contents; } [class~="sigiers-content"]{ flex-shrink: 0; width: 12.5rem; } [class~="sigiers"]{ overflow-x: hidden; position: relative; } [class~="sigiers"] [class~="wrapper"]:before{ position: absolute; content: ""; width: 3.125rem; height: 100%; top: 0; z-index: 2; left: 0; background: linear-gradient(to left,rgba(255, 255, 255, 0) ,white); } [class~="sigiers"] [class~="wrapper"]:after{ position: absolute; content: ""; width: 3.125rem; height: 100%; top: 0; z-index: 2; right: 0; background: linear-gradient(to right,rgba(255, 255, 255, 0) ,white); } [class~="sigiers"] [class~="wrapper"]{ display: flex; flex-direction: row; gap: 2.5rem; } [class~="sigiers-content"] p, [class~="sigiers-content"] h3{ text-align: center; } [class~="desc-footer-text"]{ font-size: 1.125rem; line-height: 1.75rem; } [class~="desc-footer-text"] span{ font-size: 1.3125rem; } [class~="desc-quotes"]{ font-size: 1.1875rem; } [class~="about-us-description-content-title"], [class~="about-us-description-content-title-2"]{ font-size: 2.8125rem; } [class~="sigiers"] [class~="medias"]{ display: flex; } }