body.skin-comercial .sustainability-commercial-page {
overflow: clip;
background: var(--jomo-bg);
}
body.skin-comercial .sustainability-commercial-page > section + section {
border-top: 1px solid var(--jomo-line-soft);
} body.skin-comercial .sustainability-hero {
--commercial-hero-grid-content: minmax(390px, 0.9fr);
--commercial-hero-grid-media: minmax(0, 1.1fr);
--commercial-hero-gap: clamp(48px, 6.5vw, 104px);
--commercial-hero-content-max: 680px;
--commercial-hero-title-size: var(--jomo-hero-title-size);
--commercial-hero-title-size-mobile: var(--jomo-hero-title-size-mobile);
--commercial-hero-title-measure: 17ch;
--commercial-hero-media-ratio: 16 / 9;
--commercial-hero-media-height: clamp(360px, 31vw, 500px);
}
body.skin-comercial .sustainability-hero__image {
object-position: center;
}
body.skin-comercial .sustainability-commitment {
padding-block: var(--jomo-space-section) var(--jomo-space-section-tight);
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications {
padding-block: 0 var(--jomo-space-section-tight);
}
body.skin-comercial .sustainability-commitment {
border-top: 1px solid var(--jomo-line-soft);
}
body.skin-comercial .sustainability-commitment__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
gap: clamp(38px, 5vw, 78px);
align-items: start;
margin-bottom: var(--jomo-space-component);
}
body.skin-comercial .sustainability-commitment__title {
--commercial-title-measure: var(--jomo-title-measure-wide);
font-size: var(--jomo-type-section);
line-height: 0.96;
letter-spacing: -0.048em;
}
body.skin-comercial .sustainability-commitment__text,
body.skin-comercial .sustainability-commitment__text p {
color: var(--jomo-text-soft);
font-size: var(--jomo-type-body);
line-height: 1.68;
}
body.skin-comercial .sustainability-commitment__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--jomo-line);
border-left: 1px solid var(--jomo-line);
}
body.skin-comercial .sustainability-commitment__card {
display: flex;
min-height: 250px;
flex-direction: column;
padding: 26px;
border-right: 1px solid var(--jomo-line);
border-bottom: 1px solid var(--jomo-line);
background: var(--jomo-surface);
}
body.skin-comercial .sustainability-commitment__card:nth-child(even) {
background: var(--jomo-panel);
}
body.skin-comercial .sustainability-commitment__number {
color: var(--jomo-text-faint);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
}
body.skin-comercial .sustainability-commitment__card-title {
margin: auto 0 13px;
padding-top: 38px;
font-family: var(--jomo-font-serif);
font-size: clamp(23px, 1.55vw, 28px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.03em;
}
body.skin-comercial .sustainability-commitment__card-text,
body.skin-comercial .sustainability-commitment__card-text p {
margin: 0;
color: var(--jomo-text-soft);
font-size: 12px;
line-height: 1.6;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__title {
--commercial-title-measure: var(--jomo-title-measure-wide);
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__panel {
grid-template-columns: minmax(0, 0.82fr) minmax(500px, 1.18fr);
}
@media (max-width: 991px) {
body.skin-comercial .sustainability-commitment__intro {
margin-bottom: var(--jomo-space-component-compact);
}
body.skin-comercial .sustainability-commitment__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .sustainability-commitment__card-text,
body.skin-comercial .sustainability-commitment__card-text p {
font-size: 13px;
line-height: 1.62;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__panel {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
body.skin-comercial .sustainability-commitment {
padding-block: var(--jomo-space-section-compact) 40px;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications {
padding-block: 0 44px;
}
body.skin-comercial .sustainability-commitment__intro {
grid-template-columns: 1fr;
gap: 24px;
}
body.skin-comercial .sustainability-commitment__title {
font-size: clamp(36px, 10vw, 46px);
}
body.skin-comercial .sustainability-commitment__grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: var(--jomo-rail-card-mobile);
gap: var(--jomo-rail-gap);
margin-inline: calc(var(--jomo-gutter) * -1);
padding: 0 var(--jomo-gutter) 12px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
border: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.skin-comercial .sustainability-commitment__grid::-webkit-scrollbar {
display: none;
}
body.skin-comercial .sustainability-commitment__card {
min-height: 220px;
padding: 22px;
border: 1px solid var(--jomo-line);
scroll-snap-align: start;
}
body.skin-comercial .sustainability-commitment__card-title {
padding-top: 24px;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__panel {
gap: 28px;
padding: 24px;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
border: 0;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__item {
grid-column: span 2;
min-height: 142px;
padding: 14px 10px;
border: 1px solid var(--jomo-line);
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__item:nth-child(n + 4) {
grid-column: span 3;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__logo {
min-height: 80px;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__logo img {
max-height: 72px;
}
body.skin-comercial .sustainability-commercial-page .commercial-certifications__label {
font-size: 8px;
line-height: 1.3;
}
}
@media (prefers-reduced-motion: reduce) {
body.skin-comercial .sustainability-commercial-page *,
body.skin-comercial .sustainability-commercial-page *::before,
body.skin-comercial .sustainability-commercial-page *::after {
scroll-behavior: auto;
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
}