.prk-product-services { --prk-product-services-gap: 12px; --prk-product-services-padding-x: 18px; --prk-product-services-padding-y: 10px; --prk-product-services-radius: 12px; --prk-product-services-border: #e0e0e2; --prk-product-services-bg: #fff; --prk-product-services-image-size: 52px; --prk-product-services-item-min-height: 78px; --prk-product-services-title-size: 12px; --prk-product-services-subtitle-size: 10px; --prk-product-services-title-color: #424750; --prk-product-services-subtitle-color: #81858b; --prk-product-services-content-direction: column; --prk-product-services-columns-desktop: 4; --prk-product-services-columns-tablet: 3; --prk-product-services-columns-mobile: 2; --prk-product-services-flex-width-desktop: calc((100% - 36px) / 4); --prk-product-services-flex-width-tablet: calc((100% - 24px) / 3); --prk-product-services-flex-width-mobile: calc((100% - 12px) / 2); --prk-product-services-scroll-rows-tablet: 1; --prk-product-services-scroll-rows-mobile: 1; --prk-product-services-scroll-width-tablet: 220px; --prk-product-services-scroll-width-mobile: 178px; width: 100%; margin-top: 0.75rem; padding: var(--prk-product-services-padding-y) var(--prk-product-services-padding-x); border: 1px solid var(--prk-product-services-border); border-radius: var(--prk-product-services-radius); background: var(--prk-product-services-bg); box-sizing: border-box; overflow: hidden; } .prk-product-services, .prk-product-services * { box-sizing: border-box; } .prk-product-services__track { width: 100%; gap: var(--prk-product-services-gap); } .prk-product-services__item { min-width: 0; margin: 0; } .prk-product-services__link { display: flex; flex-direction: var(--prk-product-services-content-direction); align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--prk-product-services-item-min-height); padding: 6px; color: inherit; text-align: center; text-decoration: none; border-radius: calc(var(--prk-product-services-radius) - 4px); transition: background-color .2s ease, transform .2s ease; } .prk-product-services__image { display: block; flex: 0 0 auto; width: var(--prk-product-services-image-size); height: var(--prk-product-services-image-size); max-width: none; object-fit: contain; } .prk-product-services__content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; line-height: 1.75; } .prk-product-services__title { display: block; max-width: 100%; color: var(--prk-product-services-title-color); font-size: var(--prk-product-services-title-size); font-weight: 500; line-height: 1.7; white-space: normal; } .prk-product-services__subtitle { display: block; max-width: 100%; color: var(--prk-product-services-subtitle-color); font-size: var(--prk-product-services-subtitle-size); font-weight: 400; line-height: 1.65; white-space: normal; } @media (min-width: 1024px) { .prk-product-services.is-hidden-desktop { display: none !important; } .prk-product-services[data-layout-desktop="row"] .prk-product-services__track { display: flex; flex-wrap: nowrap; } .prk-product-services[data-layout-desktop="row"] .prk-product-services__item { flex: 1 1 0; } .prk-product-services[data-layout-desktop="flex"] .prk-product-services__track { display: flex; flex-wrap: wrap; } .prk-product-services[data-layout-desktop="flex"] .prk-product-services__item { flex: 0 0 var(--prk-product-services-flex-width-desktop); max-width: var(--prk-product-services-flex-width-desktop); } .prk-product-services[data-layout-desktop="grid"] .prk-product-services__track { display: grid; grid-template-columns: repeat(var(--prk-product-services-columns-desktop), minmax(0, 1fr)); } .prk-product-services[data-layout-desktop="scroll"] .prk-product-services__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; } } @media (min-width: 768px) and (max-width: 1023px) { .prk-product-services.is-hidden-tablet { display: none !important; } .prk-product-services[data-layout-tablet="row"] .prk-product-services__track { display: flex; flex-wrap: nowrap; } .prk-product-services[data-layout-tablet="row"] .prk-product-services__item { flex: 1 1 0; } .prk-product-services[data-layout-tablet="flex"] .prk-product-services__track { display: flex; flex-wrap: wrap; } .prk-product-services[data-layout-tablet="flex"] .prk-product-services__item { flex: 0 0 var(--prk-product-services-flex-width-tablet); max-width: var(--prk-product-services-flex-width-tablet); } .prk-product-services[data-layout-tablet="grid"] .prk-product-services__track { display: grid; grid-template-columns: repeat(var(--prk-product-services-columns-tablet), minmax(0, 1fr)); } .prk-product-services[data-layout-tablet="scroll"] .prk-product-services__track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--prk-product-services-scroll-rows-tablet), minmax(0, 1fr)); grid-auto-columns: var(--prk-product-services-scroll-width-tablet); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; } } @media (max-width: 767px) { .prk-product-services.is-hidden-mobile { display: none !important; } .prk-product-services[data-layout-mobile="row"] .prk-product-services__track { display: flex; flex-wrap: nowrap; } .prk-product-services[data-layout-mobile="row"] .prk-product-services__item { flex: 1 1 0; } .prk-product-services[data-layout-mobile="flex"] .prk-product-services__track { display: flex; flex-wrap: wrap; } .prk-product-services[data-layout-mobile="flex"] .prk-product-services__item { flex: 0 0 var(--prk-product-services-flex-width-mobile); max-width: var(--prk-product-services-flex-width-mobile); } .prk-product-services[data-layout-mobile="grid"] .prk-product-services__track { display: grid; grid-template-columns: repeat(var(--prk-product-services-columns-mobile), minmax(0, 1fr)); } .prk-product-services[data-layout-mobile="scroll"] .prk-product-services__track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--prk-product-services-scroll-rows-mobile), minmax(0, 1fr)); grid-auto-columns: var(--prk-product-services-scroll-width-mobile); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } } .prk-product-services[data-layout-desktop="scroll"] .prk-product-services__track::-webkit-scrollbar, .prk-product-services[data-layout-tablet="scroll"] .prk-product-services__track::-webkit-scrollbar, .prk-product-services[data-layout-mobile="scroll"] .prk-product-services__track::-webkit-scrollbar { display: none; } .prk-product-services[data-layout-desktop="scroll"] .prk-product-services__item, .prk-product-services[data-layout-tablet="scroll"] .prk-product-services__item, .prk-product-services[data-layout-mobile="scroll"] .prk-product-services__item { scroll-snap-align: start; }