.glide { position: relative; width: 100%; box-sizing: border-box; } .glide * { box-sizing: inherit; } .glide__track { overflow: hidden; } .glide__slides { position: relative; width: 100%; list-style: none; backface-visibility: hidden; transform-style: preserve-3d; touch-action: pan-Y; overflow: hidden; margin: 0; padding: 0; white-space: nowrap; display: flex; flex-wrap: nowrap; will-change: transform; } .glide__slides--dragging { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .glide__slide { width: 100%; height: 100%; flex-shrink: 0; white-space: normal; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .glide__slide a { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } .glide__arrows { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .glide__bullets { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .glide--rtl { direction: rtl; } @charset "UTF-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; line-break: after-white-space; -moz-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } html { font-size: 62.5%; } body { font-size: 1.4rem; background-color: #FFF; font-family: "Inter", Helvetica, Arial, sans-serif; line-height: 1.25; margin: auto; overflow-x: hidden; } @media screen and (min-width: 500px) { body { font-size: 1.6rem; } } @media screen and (min-width: 800px) { body { font-size: 1.8rem; } } @media screen and (min-width: 1024px) { body { font-size: 2rem; } } h1, h2, .product-header h1, .template-productcollection .collection-header .label h1, .template-caselist .collection-header .label h1, .template-case .case-data h1, h3, h4 { margin: 0.1em 0 0.5em; font-weight: 500; } h1 { font-size: 3.2rem; margin-top: 0.2em; margin-bottom: 1em; } h2, .product-header h1, .template-productcollection .collection-header .label h1, .template-caselist .collection-header .label h1, .template-case .case-data h1 { font-size: 2.4rem; } h3 { font-size: 2.2rem; } h4 { font-size: 1.8rem; } @media screen and (min-width: 800px) { h1 { font-size: 5rem; } h2, .product-header h1, .template-productcollection .collection-header .label h1, .template-caselist .collection-header .label h1, .template-case .case-data h1 { font-size: 3.2rem; } h3 { font-size: 2.8rem; } h4 { font-size: 2.4rem; } } a { color: #2B583E; } a:focus-visible { border: 2px solid #2B583E; } p { margin: 0.5em 0 1em; } strong { font-weight: 500; } em { font-style: italic; } ul, ol { margin: 1em 0; margin-left: 2.6rem; } ul { list-style: disc; } ol { list-style-type: decimal; } nav ul, nav ol { display: flex; margin: 0; padding: 0; list-style: none; } .main-content { width: 96%; max-width: 1440px; margin: auto; } @media screen and (min-width: 800px) { .main-content { padding-top: calc(120px + 3%); } } @media screen and (min-width: 1024px) { .main-content { padding-top: calc(160px + 3%); } } .container { width: 96%; max-width: 1440px; margin: auto; } .button { display: inline-block; color: #000; font-size: 1.6rem; transition: transform 0.25s ease; position: relative; padding-right: 0.8em; position: relative; } .button:before { content: ""; position: absolute; display: block; height: 0.1em; bottom: 0.1em; left: 0; right: 0; background-color: #2B583E; opacity: 0; transition: opacity 0.25s ease; } .button:hover::before { opacity: 1; } .button:after { height: 1em; width: 1em; top: 0.05em; position: absolute; background-image: url(/assets/icons/pil-svart.svg); background-size: 100%; content: ""; transition: transform 0.25s ease; } .button:focus-visible { border: 0.1em solid #2B583E; } .button:hover::after { transform: translate(0.1em, -0.1em); } .button.button-secondary { color: #A2A2A2; } .button.button-secondary:after { background-image: url(/assets/icons/pil-gra.svg); } .button.button-big { font-size: clamp(2.8rem, 4vw, 5.2rem); } @media screen and (min-width: 800px) { .button { font-size: 2rem; } } figure img { display: block; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .hoverlink { position: relative; } .hoverlink:before { content: ""; position: absolute; display: block; width: 100%; height: 2px; bottom: 0; left: 0; right: 0; background-color: #2B583E; opacity: 0; transition: opacity 0.3s ease; } .hoverlink:hover::before { opacity: 1; } .main-content figure { opacity: 0; } .main-content figure.fade-in { animation: slideIn 0.8s ease 0.3s forwards; } @keyframes slideIn { 0% { -webkit-transform: translateY(40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } .main-content .glide { margin-bottom: auto; } .main-content .glide .glide__bullets { color: #A2A2A2; text-align: center; width: 100%; position: absolute; bottom: 20px; } .main-content .glide .glide__bullets .glide__bullet--active { color: #2B583E; } @media screen and (min-width: 800px) { .main-content .glide { width: 49%; flex: 1 1 49%; aspect-ratio: 4/3; } } .block:not(.block-heading, .block-list, .block-text) { margin-bottom: clamp(60px, 7vw, 100px); } form .honeypot { position: absolute; left: -9999px; } form label { display: block; color: #A2A2A2; font-size: 1.4rem; } form .input-group { margin-bottom: 20px; } form .input-group input { height: 48px; border: 1px solid #e1e1e1; padding-left: 8px; font-size: 1.8rem; width: 100%; max-width: 535px; } form .input-group input:focus-visible { border-color: #2B583E; } form .textarea-group { margin-bottom: 20px; } form .textarea-group textarea { height: 100px; border: 1px solid #e1e1e1; width: 100%; max-width: 535px; padding: 8px; } form .textarea-group textarea:focus-visible { border-color: #2B583E; } .template-case .case-data { display: flex; flex-direction: column; margin-top: calc(clamp(60px, 7vw, 100px) / 2); margin-bottom: clamp(60px, 7vw, 100px); } .template-case .case-data figure { aspect-ratio: 4/3; margin-bottom: 10px; } .template-case .case-data figure img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .template-case .case-data .content { display: flex; flex-direction: column; } .template-case .case-data .button-container { flex-grow: 0; margin-top: auto; } @media screen and (min-width: 500px) { .template-case .case-data { flex-direction: row; gap: 2%; } .template-case .case-data figure { flex: 1 1 49%; margin-bottom: auto; } .template-case .case-data .content { flex: 1 1 49%; } } .template-caselist .collection-header { margin-top: calc(clamp(60px, 7vw, 100px) / 2); margin-bottom: clamp(60px, 7vw, 100px); } .template-caselist .collection-header .label h1 { color: #A2A2A2; } @media screen and (min-width: 800px) { .template-caselist .collection-header { display: flex; gap: 2%; } .template-caselist .collection-header > * { flex: 1 1 50%; } } .template-contact .persons { margin-bottom: clamp(60px, 7vw, 100px); } .template-contact .persons article { margin-bottom: calc(clamp(60px, 7vw, 100px) / 2); } .template-contact .persons article .info { display: flex; flex-direction: column; } .template-contact .persons article .info h3 { font-size: 1.8rem; margin: 0.4em 0 0.3em; } .template-contact .persons article .info .title { color: #A2A2A2; margin-bottom: 1.1em; } .template-contact .persons article .info a { display: inline-block; margin-right: auto; position: relative; color: #A2A2A2; line-height: 1.3; } .template-contact .persons article .info a:before { content: ""; position: absolute; display: block; height: 0.1em; bottom: 0.1em; left: 0; right: 0; background-color: #A2A2A2; opacity: 0; transition: opacity 0.25s ease; } .template-contact .persons article .info a:hover::before { opacity: 1; } .template-contact .form-section { margin-bottom: clamp(60px, 7vw, 100px); } .template-contact .form-section h2, .template-contact .form-section .product-header h1, .product-header .template-contact .form-section h1, .template-contact .form-section .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .template-contact .form-section h1, .template-contact .form-section .template-case .case-data h1, .template-case .case-data .template-contact .form-section h1, .template-contact .form-section .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .template-contact .form-section h1 { color: #A2A2A2; font-size: 1.8rem; } .template-contact .form-section p { font-size: 1.8rem; } .template-contact .form-section p.message { font-size: 1.8rem; } .template-contact .form-section a { color: #000; position: relative; } .template-contact .form-section a:before { content: ""; position: absolute; display: block; height: 0.1em; bottom: 0.1em; left: 0; right: 0; background-color: #2B583E; opacity: 0; transition: opacity 0.25s ease; } .template-contact .form-section a:hover::before { opacity: 1; } .template-contact .map { margin-bottom: clamp(60px, 7vw, 100px); } .template-contact .map iframe { width: 100%; height: 450px; } @media screen and (min-width: 500px) { .template-contact .form-section { display: flex; flex-direction: row-reverse; gap: 2%; } .template-contact .form-section > * { flex: 1 1 49%; } .template-contact .form-section p, .template-contact .form-section a { font-size: 2.2rem; } } @media screen and (min-width: 800px) { .template-contact .persons .layout { display: flex; gap: 2%; } .template-contact .persons .layout article { flex: 0 1 32%; margin-bottom: 0; } .template-contact .persons .layout article .info h3 { font-size: 2.2rem; } .template-contact .form-section h2, .template-contact .form-section .product-header h1, .product-header .template-contact .form-section h1, .template-contact .form-section .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .template-contact .form-section h1, .template-contact .form-section .template-case .case-data h1, .template-case .case-data .template-contact .form-section h1, .template-contact .form-section .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .template-contact .form-section h1 { font-size: clamp(2.2rem, 2.5vw, 3.2rem); } .template-contact .form-section p, .template-contact .form-section a { font-size: clamp(3.2rem, 3.5vw, 5.2rem); } } .template-home .hero { background-color: #284a37; position: relative; height: clamp(140px, 33vw, 450px); margin-bottom: clamp(60px, 7vw, 100px); } .template-home .hero h1 { position: absolute; left: 12px; bottom: 12px; margin: 0; color: #FFF; font-size: clamp(3.2rem, 10vw, 13rem); } .template-home .hero img { mix-blend-mode: multiply; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .template-product .data-row .data { margin-bottom: calc(clamp(60px, 7vw, 100px) / 2); } .template-product .data-row .data dl { display: flex; flex-wrap: wrap; } .template-product .data-row .data dl dt, .template-product .data-row .data dl dd { line-height: 1.5; border-bottom: 1px solid #E5E5E5; } .template-product .data-row .data dl dt { width: 50%; font-weight: 500; padding-right: 8px; } .template-product .data-row .data dl dd { width: 50%; } .template-product .data-row .documents ul { margin: 0; padding: 0; list-style: none; line-height: 1.5; } .template-product .data-row .documents ul a { color: #000; text-decoration: underline; transition: color 0.25s ease; } .template-product .data-row .documents ul a:hover { color: #2B583E; } @media screen and (min-width: 500px) { .template-product .data-row { display: flex; gap: 2%; } .template-product .data-row > * { flex: 0 1 50%; } .template-product .data-row .data dl dt, .template-product .data-row .data dl dd { width: 50%; } } .template-productcollection .collection-header { margin-top: calc(clamp(60px, 7vw, 100px) / 2); margin-bottom: clamp(60px, 7vw, 100px); } .template-productcollection .collection-header .label h1 { color: #A2A2A2; } @media screen and (min-width: 800px) { .template-productcollection .collection-header { display: flex; gap: 2%; } .template-productcollection .collection-header > * { flex: 1 1 50%; } } .caselist { flex-wrap: wrap; } .caselist .case { flex: 1 1 100%; margin-bottom: clamp(40px, 5vw, 80px); } .caselist .case h2, .caselist .case .product-header h1, .product-header .caselist .case h1, .caselist .case .template-case .case-data h1, .template-case .case-data .caselist .case h1, .caselist .case .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .caselist .case h1, .caselist .case .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .caselist .case h1, .caselist .case h3 { font-size: 1.6rem; margin-top: 0.6em; margin-bottom: 0.2em; color: #000; } .caselist .case figure { aspect-ratio: 3/2; } @media screen and (min-width: 500px) { .caselist { display: flex; gap: 2%; } .caselist .case { flex: 0 1 49%; } } @media screen and (min-width: 800px) { .caselist .case { flex: 0 1 32%; } .caselist .case h2, .caselist .case .product-header h1, .product-header .caselist .case h1, .caselist .case .template-case .case-data h1, .template-case .case-data .caselist .case h1, .caselist .case .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .caselist .case h1, .caselist .case .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .caselist .case h1 { font-size: 2rem; } } .site-header { z-index: 100; border-bottom: 4px solid #2B583E; margin-bottom: 2%; transition: transform 0.4s ease; } .site-header.slideUp { transform: translateY(-100%); } .site-header.slideUp .main-menu li:hover .submenu-background { pointer-events: none; } .site-header.slideUp .main-menu li:hover .submenu { pointer-events: none; } .site-header .container { height: 80px; display: flex; align-items: center; justify-content: space-between; position: relative; } .site-header .site-logo { height: 46px; z-index: 101; } .site-header .main-menu { display: none; z-index: 99; position: relative; } @media (min-width: 800px) { .site-header { position: fixed; background-color: #FFF; top: 0; left: 0; right: 0; } .site-header .container { height: 120px; } .site-header .site-logo { height: 54px; } .site-header .main-menu { display: block; } .site-header .main-menu > ul > li { margin-left: 20px; } .site-header .main-menu li.has-submenu { position: relative; } .site-header .main-menu li.has-submenu > li > a { margin-right: 8px; } .site-header .main-menu li.has-submenu .submenu-background { position: fixed; top: 120px; background-color: #FFF; transform: translateY(calc(-100% + 4px)); opacity: 0; left: 0; right: 0; border-bottom: 4px solid #2B583E; transition: all 0.25s ease; pointer-events: none; } .site-header .main-menu li .submenu-icon { display: inline-block; background-size: 10px 10px; width: 10px; height: 10px; margin-right: 2px; transition: transform 0.25s ease; } .site-header .main-menu li .submenu { display: flex; flex-direction: column; position: absolute; top: calc(100% + 2px); width: 500px; left: 0; transition: all 0.25s ease; opacity: 0; pointer-events: none; padding: 8px 0; min-width: 150px; } .site-header .main-menu li .submenu li { display: flex; margin-right: auto; padding: 12px 0; } .site-header .main-menu li .submenu li a { padding: 2px; align-self: flex-start; } .site-header .main-menu li:hover .submenu { opacity: 1; pointer-events: all; } .site-header .main-menu li:hover .submenu-icon { transform: rotate(45deg); } .site-header .main-menu li:hover .submenu-background { opacity: 1; transform: translateY(0); pointer-events: all; } .site-header .main-menu .current-class > a:before { opacity: 1; } .site-header .main-menu a { color: #000; padding: 2px; font-size: 1.8rem; position: relative; } .site-header .main-menu a:before { content: ""; position: absolute; display: block; height: 0.1em; bottom: 0.1em; left: 0; right: 0; background-color: #2B583E; opacity: 0; transition: opacity 0.25s ease; } .site-header .main-menu a:hover::before { opacity: 1; } } @media (min-width: 1024px) { .site-header .container { height: 160px; } .site-header .site-logo { height: 68px; } .site-header .main-menu a { font-size: 2.2rem; } .site-header .main-menu li.has-submenu .submenu-background { top: 160px; } } .site-footer { display: flex; flex-direction: column; padding: 40px 0; border-top: 4px solid #2B583E; font-weight: 300; color: #000; line-height: 1.8; } .site-footer .footer-columns { background-position: top 0 right 0; background-repeat: no-repeat; background-size: 100px; } .site-footer .footer-columns .column { margin-bottom: 20px; } .site-footer h4 { color: #000; font-weight: 400; margin-bottom: 1rem; } .site-footer a { color: #515151; position: relative; -webkit-text-decoration: underline solid transparent; text-decoration: underline solid transparent; transition: -webkit-text-decoration 0.5s ease; transition: text-decoration 0.5s ease; transition: text-decoration 0.5s ease, -webkit-text-decoration 0.5s ease; } .site-footer a:hover { -webkit-text-decoration: underline solid Currentcolor; text-decoration: underline solid Currentcolor; } .site-footer .footer-menu ul { display: flex; flex-direction: column; margin-bottom: 16px; } .site-footer .rights { font-size: 1.5rem; text-align: center; margin-top: 20px; font-weight: 300; color: #A2A2A2; } @media all and (min-width: 500px) { .site-footer .footer-columns { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2%; background-size: 80px; } .site-footer .footer-columns .column { display: flex; flex-direction: column; flex: 1 1 40%; margin-bottom: 0; } .site-footer .footer-columns .column.contact { order: 4; } } @media all and (min-width: 800px) { .site-footer { padding: 50px 0; } .site-footer .footer-columns { padding-left: 20%; background-position: top 0 left 0; background-size: 130px; } .site-footer .footer-columns .column { flex-basis: 23%; } .site-footer .footer-columns .column h4 { font-size: 2rem; } .site-footer .footer-columns .column p, .site-footer .footer-columns .column a { font-size: 1.6rem; } .site-footer .footer-columns .column.contact { order: 0; } } .mobile-menu .toggle-menu { width: 50px; height: 50px; border-radius: 50%; background: #000; color: #FFF; position: fixed; bottom: 30px; right: 30px; text-align: center; z-index: 101; display: flex; align-items: center; justify-content: center; } .mobile-menu span { height: 22px; } .mobile-menu span img { height: 22px; } .mobile-menu nav { position: relative; overflow: hidden; z-index: 100; } .mobile-menu nav ul { display: flex; flex-direction: column; } .mobile-menu nav ul .submenu-button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: 36px; } .mobile-menu nav ul .submenu-button img { margin-left: 2px; transition: transform 0.25s ease; transform: rotate(0deg); } .mobile-menu nav ul .submenu-button.open img { transform: rotate(-45deg); } .mobile-menu nav ul .submenu-button img { width: 16px; height: 16px; } .mobile-menu nav ul.main-menu { position: fixed; bottom: 0; right: 0; left: 0; top: 0; background-color: #E5E5E5; background-size: auto 40px; background-position: 20px 20px; background-repeat: no-repeat; padding-top: 60px; padding-bottom: 8px; transition: all 0.25s ease; } .mobile-menu nav ul.main-menu.submenu-open > li > a { opacity: 0.5; } .mobile-menu nav ul.main-menu > li { display: flex; flex-wrap: wrap; align-items: center; } .mobile-menu nav ul.main-menu > li.info { margin-top: auto; } .mobile-menu nav ul.main-menu > li.info a { font-weight: 400; font-size: 1.4rem; padding: 4px 16px; color: #2B583E; } .mobile-menu nav ul.main-menu a { display: flex; color: #515151; padding: 12px 12px 12px 16px; font-size: 3rem; transition: opacity 0.25s ease; } .mobile-menu nav ul.submenu { width: 100%; display: none; } .mobile-menu nav ul.submenu.open { display: flex; } .mobile-menu nav ul.submenu a { padding-left: 36px; font-size: 2.2rem; padding: 8px 16px; } .mobile-menu.closed nav .main-menu { display: none; } .mobile-menu.closed .hideIfClosed { display: none; } .mobile-menu.open .toggle-menu { box-shadow: none; background: transparent; } .mobile-menu.open .hideIfOpen { display: none; } @media all and (min-width: 800px) { .mobile-menu .toggle-menu { display: none; position: absolute; top: 10px; box-shadow: none; background: transparent; } .mobile-menu nav { position: static; } .mobile-menu nav .main-menu { position: absolute; top: 65px; bottom: auto; } } @media all and (min-width: 800px) { .mobile-menu { display: none; } } .products .list-product, .collections .list-product { flex: 1 1 100%; margin-bottom: clamp(40px, 5vw, 80px); } .products .list-product h2, .products .list-product .product-header h1, .product-header .products .list-product h1, .products .list-product .template-case .case-data h1, .template-case .case-data .products .list-product h1, .products .list-product .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .products .list-product h1, .products .list-product .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .products .list-product h1, .products .list-product h3, .collections .list-product h2, .collections .list-product .product-header h1, .product-header .collections .list-product h1, .collections .list-product .template-case .case-data h1, .template-case .case-data .collections .list-product h1, .collections .list-product .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .collections .list-product h1, .collections .list-product .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .collections .list-product h1, .collections .list-product h3 { font-size: 1.6rem; margin-top: 0.6em; margin-bottom: 0.2em; color: #000; } .products .list-product figure, .collections .list-product figure { aspect-ratio: 4/3; } @media screen and (min-width: 500px) { .products, .collections { display: flex; flex-wrap: wrap; gap: 2%; } .products .list-product, .collections .list-product { flex: 0 1 49%; } } @media screen and (min-width: 800px) { .products .list-product h2, .products .list-product .product-header h1, .product-header .products .list-product h1, .products .list-product .template-case .case-data h1, .template-case .case-data .products .list-product h1, .products .list-product .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .products .list-product h1, .products .list-product .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .products .list-product h1, .products .list-product h3, .collections .list-product h2, .collections .list-product .product-header h1, .product-header .collections .list-product h1, .collections .list-product .template-case .case-data h1, .template-case .case-data .collections .list-product h1, .collections .list-product .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .collections .list-product h1, .collections .list-product .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .collections .list-product h1, .collections .list-product h3 { font-size: 2rem; } } @media screen and (min-width: 800px) { .products .list-product { flex: 0 1 32%; } .products .list-product figure { aspect-ratio: 4/3; } } .product-header { display: flex; flex-direction: column; margin-top: calc(clamp(60px, 7vw, 100px) / 2); margin-bottom: clamp(60px, 7vw, 100px); } .product-header figure { aspect-ratio: 4/3; margin-bottom: 10px; } .product-header figure img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .product-header .content { display: flex; flex-direction: column; } .product-header .content .button { margin-top: auto; margin-right: auto; flex-grow: 0; } @media screen and (min-width: 800px) { .product-header { flex-direction: row; gap: 2%; } .product-header figure { flex: 1 1 49%; } .product-header .content { flex: 1 1 49%; } } .block-editor .label h2, .block-editor .label .template-case .case-data h1, .template-case .case-data .block-editor .label h1, .block-editor .template-caselist .collection-header .label h1, .template-caselist .collection-header .block-editor .label h1, .block-editor .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .block-editor .label h1, .block-editor .label .product-header h1, .product-header .block-editor .label h1 { color: #A2A2A2; } @media screen and (min-width: 800px) { .block-editor { display: flex; gap: 2%; } .block-editor > * { flex: 1 1 50%; } } .block-imagelinks .layout { display: flex; flex-wrap: wrap; } .block-imagelinks .layout article { flex: 1 1 100%; margin-bottom: 28px; } .block-imagelinks .layout article figure { aspect-ratio: 4/5; } .block-imagelinks .layout article figure img { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; } .block-imagelinks .layout article h3 { font-size: 1.6rem; margin-top: 0.6em; margin-bottom: 0.2em; color: #000; } @media screen and (min-width: 500px) { .block-imagelinks .layout { gap: 2%; } .block-imagelinks .layout.col-3 article { flex: 1 1 32%; } .block-imagelinks .layout article { flex: 1 1 49%; } .block-imagelinks .layout article figure { aspect-ratio: 2/3; } } @media screen and (min-width: 800px) { .block-imagelinks .layout article h3 { font-size: 2rem; } .block-imagelinks .layout.col-4 article { flex: 1 0 22%; } } .block-sidebyside h3 { font-weight: 500; } .block-sidebyside article figure.sidebyside-image { aspect-ratio: 5/3; position: relative; } .block-sidebyside article .sidebyside-image { margin-bottom: 18px; border-radius: 5px; } .block-sidebyside article .sidebyside-image img { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .block-sidebyside article .sidebyside-image h2, .block-sidebyside article .sidebyside-image .template-case .case-data h1, .template-case .case-data .block-sidebyside article .sidebyside-image h1, .block-sidebyside article .sidebyside-image .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .block-sidebyside article .sidebyside-image h1, .block-sidebyside article .sidebyside-image .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .block-sidebyside article .sidebyside-image h1, .block-sidebyside article .sidebyside-image .product-header h1, .product-header .block-sidebyside article .sidebyside-image h1 { font-weight: 500; font-size: 3.6rem; margin-top: 0; } .block-sidebyside article .sidebyside-content .button-container { margin-top: 30px; } @media all and (min-width: 500px) { .block-sidebyside article { display: flex; gap: 2%; } .block-sidebyside article.reverse { flex-direction: row-reverse; } .block-sidebyside article .sidebyside-image { display: flex; flex-direction: column; flex: 1 1 49%; margin-bottom: 0; } .block-sidebyside article .sidebyside-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .block-sidebyside article .sidebyside-content { flex: 1 1 48%; padding-right: 60px; } .block-sidebyside article .sidebyside-content .button-container { margin-top: auto; } } @media all and (min-width: 800px) { .block-sidebyside article .sidebyside-image { width: auto; } .block-sidebyside article .sidebyside-image h2, .block-sidebyside article .sidebyside-image .template-case .case-data h1, .template-case .case-data .block-sidebyside article .sidebyside-image h1, .block-sidebyside article .sidebyside-image .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .block-sidebyside article .sidebyside-image h1, .block-sidebyside article .sidebyside-image .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .block-sidebyside article .sidebyside-image h1, .block-sidebyside article .sidebyside-image .product-header h1, .product-header .block-sidebyside article .sidebyside-image h1 { font-size: 4.8rem; } .block-sidebyside article .sidebyside-content { display: flex; flex-direction: column; } .block-sidebyside article .sidebyside-content h2, .block-sidebyside article .sidebyside-content .template-case .case-data h1, .template-case .case-data .block-sidebyside article .sidebyside-content h1, .block-sidebyside article .sidebyside-content .template-caselist .collection-header .label h1, .template-caselist .collection-header .label .block-sidebyside article .sidebyside-content h1, .block-sidebyside article .sidebyside-content .template-productcollection .collection-header .label h1, .template-productcollection .collection-header .label .block-sidebyside article .sidebyside-content h1, .block-sidebyside article .sidebyside-content .product-header h1, .product-header .block-sidebyside article .sidebyside-content h1 { font-size: 3.8rem; } }