/*-------------------------------------------------------------- Homepage Layout Right --------------------------------------------------------------*/ .xm-right-layout { position:relative; display: flex; width: 100%; height: fit-content; overflow: hidden; } .xm-right-layout .xm-right-img { width: 50%; flex-direction: row; justify-content: flex-start; text-align: right; } .xm-right-layout .xm-right-img img { width: 100%; height: 100%; } .xm-right-layout .xm-text { display:flex; position: relative; width: 50%; flex-direction: row; justify-content: flex-end; text-align: left; padding:20px; align-items: center; justify-content: center; } .xm-right-layout .xm-right-title { display: block; width: 100%; flex-shrink: 0; flex-grow: 1; padding: 10px 0; font-size: 2vw; font-weight: 900; } .xm-right-layout .xm-right-description { display: block; flex-shrink: 0; width: 100%; flex-grow: 1; padding: 10px 0 20px; font-size: 1.1em; line-height: 1.6em; font-weight: 500; } .xm-right-layout .xm-position { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; max-width: 60%; } .xm-right-layout a { text-decoration: none; } .xm-right-layout .button { text-align: center; width: fit-content; font-size: 18px; font-weight: 700; padding: 8px 12px; } .xm-right-arrow { position: absolute; z-index: 9; width: 12vw; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 1100px) { .xm-right-arrow { width: 70px; } .xm-right-layout .xm-right-description { display: none; } .xm-right-layout .button { padding: 6px 10px; font-size: 11px; } }