.mnt-nl-gcrsl-image-with-slider-container { background: #f6f4f5; display: block; padding: 56px 0; position: relative; width: 100%; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-no-images .mnt-nl-gcrsl-single-image { height: 380px } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-no-images .mnt-nl-gcrsl-single-image .mnt-nl-gcrsl-image-wrapper { display: none } h3.mnt-nl-gcrsl-header-title { color: #6e0038; font-size: 32px; font-style: normal; font-weight: 400; line-height: 40px; padding: 0 96px 12px; text-align: center } .mnt-nl-gcrsl-image-with-slider-container { background: #f6f4f5; display: block; padding: 56px 0; position: relative; width: 100%; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-no-images .mnt-nl-gcrsl-single-image { height: 380px; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-no-images .mnt-nl-gcrsl-single-image .mnt-nl-gcrsl-image-wrapper { display: none; } h3.mnt-nl-gcrsl-header-title { color: #6e0038; font-size: 32px; font-style: normal; font-weight: 400; line-height: 40px; padding: 0 96px 12px; text-align: center; } p.mnt-nl-gcrsl-header-description { color: #1f1e1f; font-size: 20px; font-style: normal; font-weight: 400; line-height: 28px; padding: 0 96px; text-align: center; } .mnt-nl-gcrsl-images-container { padding: 32px 96px; position: relative; max-width: 1440px; margin: auto; display: flex; } .mnt-nl-gcrsl-images-container-after:after { backdrop-filter: blur(0); background-image: linear-gradient( 90deg, hsl(0 0% 100% / 0.1), hsl(0 0% 100% / 0.9) ); content: ""; height: calc(100% - 64px); pointer-events: none; position: absolute; right: 96px; top: 32px; width: 147px; } .mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-images-container-after:after { height: calc(100% - 32px); top: 0; } .mnt-nl-gcrsl-images-wrapper { display: flex; overflow-x: scroll; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; position: relative; } .mnt-nl-gcrsl-images-wrapper::-webkit-scrollbar { display: none; } .mnt-nl-gcrsl-images-wrapper:active { cursor: grabbing; } .mnt-nl-gcrsl-single-image { align-items: flex-start; background: #fff; box-sizing: border-box; display: flex; flex: 0 0 294px; flex-direction: column; height: 520px; justify-content: space-between; margin-right: 24px; padding: 24px; } .mnt-nl-gcrsl-card-info-container { align-items: flex-start; display: flex; flex-direction: column; gap: 24px; } p.mnt-nl-gcrsl-card-head { font-size: 20px; font-style: normal; font-weight: 400; height: 56px; line-height: 28px; overflow: hidden; overflow-wrap: break-word; word-break: break-word; } p.mnt-nl-gcrsl-card-head.mnt-nl-gcrsl-green-text { color: #aab20d; } p.mnt-nl-gcrsl-card-head.mnt-nl-gcrsl-purple-text { color: #6e0038; } .mnt-nl-gcrsl-image-wrapper { height: 120px; overflow: hidden; width: 100%; } .mnt-nl-gcrsl-image-wrapper img { height: 120px; max-width: 246px; min-width: 100%; object-fit: contain; object-position: center; } p.mnt-nl-gcrsl-card-desc { color: #1f1e1f; font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; overflow-wrap: break-word; word-break: break-word; } .mnt-nl-gcrsl-card-info-link { color: #1f1e1f; cursor: pointer; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; text-decoration-line: underline; } .mnt-nl-gcrsl-card-info-link:hover { text-decoration: none; } .mnt-nl-gcrsl-card-info-link a { color: inherit; text-decoration: none; } .mnt-nl-gcrsl-progress-bar-container { align-items: center; display: flex; justify-content: space-between; padding: 0 96px; max-width: 1440px; margin: auto; } .mnt-nl-gcrsl-progress-bar { background: #e1dbdf; height: 1px; margin: 0 24px; width: 100%; } .mnt-nl-gcrsl-progress-bar-state { background-color: #000; height: 1px; width: 75%; } .mnt-nl-gcrsl-progress-bar-btn { all: unset; cursor: pointer; display: flex; font-size: 18px; gap: 8px; } .mnt-nl-gcrsl-progress-bar-btn:hover { text-decoration: underline; } .mnt-nl-gcrsl-progress-bar-btn[disabled] { color: #8c8c8c; visibility: visible; opacity: 0.5; background: none; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container.images .mnt-nl-gcrsl-image-wrapper img { object-fit: cover; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container.images .mnt-nl-gcrsl-progress-bar-btn { background: none; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container { background: unset; margin: auto; padding: 40px 0; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container h3.mnt-nl-gcrsl-header-title, .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container p.mnt-nl-gcrsl-header-description { display: none; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-images-container { padding: 0 96px 32px; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-single-image { background: #f6f4f5; min-height: 312px; } .mnt-nl-gcrsl-image-with-slider-container .mnt-nl-gcrsl-overlay { content: ""; position: absolute; right: 96px; width: 168px; height: 520px; background: linear-gradient( 90deg, #fff0 0%, #ffffff 103.25% ); } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-no-images .mnt-nl-gcrsl-overlay { height: 380px; } @media only screen and (max-width: 768px) { .mnt-nl-gcrsl-image-with-slider-container { margin: 0; padding: 32px 0; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container { padding: 32px 0; } .mnt-nl-gcrsl-progress-bar-container { width: 100%; } h3.mnt-nl-gcrsl-header-title { padding: 0 16px 12px; } p.mnt-nl-gcrsl-header-description { padding: 0 16px; } h3.mnt-nl-gcrsl-header-title, p.mnt-nl-gcrsl-header-description { text-align: unset; } .mnt-nl-gcrsl-images-container { padding: 32px 20px; } .mnt-nl-gcrsl-images-container:after { right: 16px; } .mnt-nl-gcrsl-progress-bar-container { padding: 0 16px; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-images-container { padding: 0 0 16px 16px; } .mnt-nl-gcrsl-images-container:after { display: none; } .mnt-nl-gcrsl-image-with-slider-container .mnt-nl-gcrsl-overlay { display: none; } } p.mnt-nl-gcrsl-header-description { color: #1f1e1f; font-size: 20px; font-style: normal; font-weight: 400; line-height: 28px; padding: 0 96px; text-align: center } .mnt-nl-gcrsl-images-container { padding: 32px 96px; position: relative; max-width: 1440px; margin: auto; display: flex; } .mnt-nl-gcrsl-images-container-after:after { backdrop-filter: blur(0); background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .9)); content: ""; height: calc(100% - 64px); pointer-events: none; position: absolute; right: 96px; top: 32px; width: 147px } .mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-images-container-after:after { height: calc(100% - 32px); top: 0 } .mnt-nl-gcrsl-images-wrapper { display: flex; overflow-x: scroll; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; position: relative; } .mnt-nl-gcrsl-images-wrapper::-webkit-scrollbar { display: none; } .mnt-nl-gcrsl-images-wrapper:active { cursor: grabbing } .mnt-nl-gcrsl-single-image { align-items: flex-start; background: #fff; box-sizing: border-box; display: flex; flex: 0 0 294px; flex-direction: column; height: 520px; justify-content: space-between; margin-right: 24px; padding: 24px } .mnt-nl-gcrsl-card-info-container { align-items: flex-start; display: flex; flex-direction: column; gap: 24px } p.mnt-nl-gcrsl-card-head { font-size: 20px; font-style: normal; font-weight: 400; height: 56px; line-height: 28px; overflow: hidden; overflow-wrap: break-word; word-break: break-word } p.mnt-nl-gcrsl-card-head.mnt-nl-gcrsl-green-text { color: #aab20d } p.mnt-nl-gcrsl-card-head.mnt-nl-gcrsl-purple-text { color: #6e0038 } .mnt-nl-gcrsl-image-wrapper { height: 120px; overflow: hidden; width: 100% } .mnt-nl-gcrsl-image-wrapper img { height: 120px; max-width: 246px; min-width: 100%; object-fit: contain; object-position: center } p.mnt-nl-gcrsl-card-desc { color: #1f1e1f; font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; overflow-wrap: break-word; word-break: break-word } .mnt-nl-gcrsl-card-info-link { color: #1f1e1f; cursor: pointer; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; text-decoration-line: underline } .mnt-nl-gcrsl-card-info-link:hover { text-decoration: none; } .mnt-nl-gcrsl-card-info-link a { color: inherit; text-decoration: none } .mnt-nl-gcrsl-progress-bar-container { align-items: center; display: flex; justify-content: space-between; padding: 0 96px; max-width: 1440px; margin: auto; } .mnt-nl-gcrsl-progress-bar { background: #e1dbdf; height: 1px; margin: 0 24px; width: 100% } .mnt-nl-gcrsl-progress-bar-state { background-color: #000; height: 1px; width: 75% } .mnt-nl-gcrsl-progress-bar-btn { all: unset; cursor: pointer; display: flex; font-size: 18px; gap: 8px } .mnt-nl-gcrsl-progress-bar-btn:hover { text-decoration: underline; } .mnt-nl-gcrsl-progress-bar-btn[disabled] { color: #8C8C8C; visibility: visible; opacity: 0.5; background: none; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container.images .mnt-nl-gcrsl-image-wrapper img { object-fit: cover; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container.images .mnt-nl-gcrsl-progress-bar-btn { background: none; } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container { background: unset; margin: auto; padding: 40px 0 } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container h3.mnt-nl-gcrsl-header-title, .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container p.mnt-nl-gcrsl-header-description { display: none } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-images-container { padding: 0 96px 32px } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-single-image { background: #f6f4f5; min-height: 312px } .mnt-nl-gcrsl-image-with-slider-container .mnt-nl-gcrsl-overlay { content: ""; position: absolute; right: 96px; width: 168px; height: 520px; background: linear-gradient(90deg, rgba(246, 244, 245, 0) 0%, #FFFFFF 103.25%); } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-no-images .mnt-nl-gcrsl-overlay { height: 380px; } @media only screen and (max-width:768px) { .mnt-nl-gcrsl-image-with-slider-container { margin: 0; padding: 32px 0 } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container { padding: 32px 0 } .mnt-nl-gcrsl-progress-bar-container { width: 100% } h3.mnt-nl-gcrsl-header-title { padding: 0 16px 12px } p.mnt-nl-gcrsl-header-description { padding: 0 16px } h3.mnt-nl-gcrsl-header-title, p.mnt-nl-gcrsl-header-description { text-align: unset } .mnt-nl-gcrsl-images-container { padding: 32px 20px; } .mnt-nl-gcrsl-images-container:after { right: 16px } .mnt-nl-gcrsl-progress-bar-container { padding: 0 16px } .mnt-nl-gcrsl-image-with-slider-container.mnt-nl-gcrsl-open-container .mnt-nl-gcrsl-images-container { padding: 0 0 16px 16px } .mnt-nl-gcrsl-images-container:after { display: none } .mnt-nl-gcrsl-image-with-slider-container .mnt-nl-gcrsl-overlay { display: none; } }