.trust { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 60px 16px; background: #fff; } .trust__inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1280px; gap: 40px; margin: 0 auto; } .trust__header { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 24px; overflow: clip; } .trust__title { width: 100%; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: var(--ls-28); color: #1a1a1a; } .trust__description { width: 100%; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: var(--ls-15); color: #7a726d; } .trust__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-content: center; width: 100%; gap: 32px; } .trust-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; gap: 16px; padding: 24px; border-radius: 30px; } .trust-card__icon-frame { position: relative; flex-shrink: 0; width: 128px; height: 128px; } .trust-card__icon-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .trust-card__icon { position: absolute; max-width: none; } .trust-card__icon--one { top: 7.04%; left: -31.48%; width: 312.73%; height: 174.55%; } .trust-card__icon--two { top: 3.1%; left: -164.72%; width: 335.61%; height: 187.32%; } .trust-card__icon--three { top: -105.62%; left: -187.93%; width: 378.86%; height: 211.46%; } .trust-card__icon--four { top: 0; left: 4.14%; width: 100%; height: 100%; } .trust-card__copy { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 8px; } .trust-card__title { width: 100%; margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: var(--ls-16); color: #0d0d0d; } .trust-card__description { width: 100%; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: var(--ls-15); color: #7a726d; } .trust__divider { position: relative; display: none; /* shown only in desktop flex row via 1023px breakpoint */ flex-shrink: 0; width: 0; height: 118px; } .trust__divider-frame { position: absolute; inset: 0 -0.5px; } .trust__divider-image { display: block; width: 100%; max-width: none; height: 100%; } @media (max-width: 1022px) { .trust-card__copy { align-items: center; text-align: center; } .trust-card__title, .trust-card__description { text-align: center; } } @media (min-width: 440px) { .trust { padding-left: 20px; padding-right: 20px; } .trust__title { font-size: 32px; letter-spacing: var(--ls-32); } } @media (min-width: 576px) { .trust { padding-left: 24px; padding-right: 24px; } .trust__title { font-size: 36px; letter-spacing: var(--ls-36); } } @media (min-width: 768px) { .trust { padding-left: 36px; padding-right: 36px; } .trust__title { font-size: 42px; letter-spacing: var(--ls-42); } .trust__grid { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) and (max-width: 1022px) { .trust__grid > .trust-card:nth-child(1), .trust__grid > .trust-card:nth-child(5) { position: relative; } .trust__grid > .trust-card:nth-child(1)::after, .trust__grid > .trust-card:nth-child(5)::after { content: ''; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); width: 0; height: 118px; border-left: 1px solid rgba(240, 132, 88, 0.5); } } @media (min-width: 1023px) { .trust { padding-top: 60px; padding-bottom: 60px; padding-left: 36px; padding-right: 36px; } .trust__grid { display: flex; gap: 24px; } .trust-card { flex: 1; } .trust__divider { display: block; } } @media (min-width: 1200px) { .trust__title { font-size: 48px; letter-spacing: var(--ls-48); } .trust__description { font-size: 18px; letter-spacing: var(--ls-18); } } @media (min-width: 1376px) { .trust { padding-top: 120px; padding-bottom: 120px; padding-left: 120px; padding-right: 120px; } }