.container,
.cookie-notice-container {
width: 100%;
padding-right: 1.5rem;
padding-left: 1.5rem;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container,
.cookie-notice-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container,
.cookie-notice-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.cookie-notice-container {
max-width: 940px;
}
}
@media (min-width: 1130px) {
.container,
.cookie-notice-container {
max-width: 1070px;
}
}
@media (min-width: 1260px) {
.container,
.cookie-notice-container {
max-width: 1200px;
}
}
@media (min-width: 1700px) {
.container,
.cookie-notice-container {
max-width: 1405px;
}
}
.container-fluid {
width: 100%;
padding-right: 1.5rem;
padding-left: 1.5rem;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 350px) {
[class*=col-],
.container,
.cookie-notice-container {
padding-left: 1.5rem;
padding-right: 3.5rem;
}
}
@font-face {
font-family: "Gilroy";
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Regular.woff2);
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Regular.woff2) format("woff2"), url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Regular.ttf) format("truetype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Medium.woff2);
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Medium.woff2) format("woff2"), url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Medium.ttf) format("truetype");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Semibold.woff2);
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Semibold.woff2) format("woff2"), url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Semibold.ttf) format("truetype");
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Bold.woff2);
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Bold.woff2) format("woff2"), url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Gilroy-Bold.ttf) format("truetype");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Benzin";
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Benzin-Medium.woff2);
src: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Benzin-Medium.woff2) format("woff2"), url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/fonts/Benzin-Medium.ttf) format("truetype");
font-weight: 500;
font-display: swap;
}
html,
body,
textarea {
font-family: "Gilroy", sans-serif;
font-weight: 400;
}
:root {
--primary: #ffaa00;
--white: #ffffff;
--bg: #1b1c1e;
--black: #1b1c1e;
--color-1: #7b7b7b;
--color-2: #676767;
--color-3: #a3a3a3;
--color-4: #be8809;
--color-5: #a1a1a1;
--color-6: #9d9d9d;
--color-7: #262627;
--color-8: #a2a2a2;
--color-9: #707070;
--color-10: #282829;
--white-to-dark: #ffffff;
--white-to-black: #fff;
--dark-to-white: #1b1c1e;
--primary-to-text: #ffffff;
}
.light-mode {
--white-to-dark: #1b1c1e;
--white-to-black: #000;
--dark-to-white: #ffffff;
--color-7: #f6f6f6;
--color-10: #a3a3a3;
--primary-to-text: #1b1c1e;
}
body .mb-0 {
margin-bottom: 0;
}
body .d-flex {
display: flex;
}
body .d-none {
display: none;
}
@media (min-width: 992px) {
body .d-lg-block {
display: block;
}
}
@media (min-width: 576px) {
body .d-sm-block {
display: block;
}
}
@media (min-width: 992px) {
body .d-lg-flex {
display: flex;
}
}
@media (min-width: 992px) {
body .d-lg-none {
display: none;
}
}
@media (min-width: 576px) {
body .d-sm-none {
display: none;
}
}
body .mx-0 {
margin-left: 0;
margin-right: 0;
}
*,
:after,
:before {
box-sizing: border-box;
}
* {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block-start: 0;
padding-block-end: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}
html {
font-size: 62.5%;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
transition-property: font-size;
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
body {
font-size: 1.6rem;
background-color: var(--dark-to-white);
overflow-x: hidden;
}
body.lock {
overflow: hidden;
}
@media (min-width: 992px) {
body {
padding-left: max(10rem, 7%);
position: relative;
}
}
@media (min-width: 1700px) {
body {
padding-left: max(10rem, 14.5%);
position: relative;
}
body:before {
content: "";
position: absolute;
left: calc(14.5% - 0.1rem);
top: 0;
width: 0.1rem;
height: 100%;
background-color: var(--color-1);
opacity: 0.9;
}
}
html,
body {
color: var(--primary);
font-weight: 400;
}
::-webkit-scrollbar {
width: 1.2rem;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: var(--primary);
}
button,
input,
select {
outline: none;
border: none;
background-color: transparent;
padding: 0;
}
button:focus,
input:focus,
select:focus {
outline: none;
}
ul {
padding-left: 0;
list-style: none;
}
img,
svg,
video,
iframe {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
transition: all 0.3s ease-in-out;
will-change: color;
color: var(--primary);
}
a:hover {
text-decoration: none;
}
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
color: var(--primary);
}
.screen-reader-text,
.screen-reader-response {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus,
.screen-reader-response:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
.wp-container-1 {
justify-content: center;
}
.justify {
text-align: justify;
}
.justify-left {
text-align: left;
}
.justify-right {
text-align: right;
}
.justify-center {
text-align: center;
}
.wp-block-embed__wrapper {
height: 0;
padding-top: 56.25%;
position: relative;
}
.wp-block-embed__wrapper iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
@media (min-width: 768px) {
.mobile-only {
display: none;
}
}
h1 u,
h2 u,
h3 u {
text-decoration: none;
}
h1 u,
h2 u,
h3 u {
position: relative;
z-index: 1;
overflow: hidden;
display: inline-grid;
}
h1 u:before,
h2 u:before,
h3 u:before {
height: 1.1rem;
bottom: 0.4rem;
content: "";
position: absolute;
left: 0;
width: 100%;
pointer-events: none;
z-index: -1;
background-color: var(--primary);
will-change: transform;
transition-property: transform;
transition: transform 0.65s ease-in-out;
transform: scaleX(0);
transform-origin: left center;
}
@media (min-width: 992px) {
h1 u:before,
h2 u:before,
h3 u:before {
height: 1.8rem;
bottom: 1rem;
}
}
h1 u.active:before,
h2 u.active:before,
h3 u.active:before {
transform: scaleX(1);
}  .alignnone {
margin-left: 0;
margin-right: 0;
max-width: 100%;
height: auto;
}
.aligncenter {
display: block;
margin: 1.5rem auto;
height: auto;
}
.alignleft,
.alignright {
margin-bottom: 1.5rem;
height: auto;
}
@media (min-width: 576px) {
.alignleft {
float: left;
margin-right: 1.5rem;
}
.alignright {
float: right;
margin-left: 1.5rem;
}
}
.mega-menu {
background-color: var(--primary);
opacity: 0;
pointer-events: none;
will-change: opacity;
transition: opacity 0.3s ease-in-out;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
padding: 8rem 0 0 0;
z-index: 98;
}
.mega-menu__container {
height: 100%;
display: flex;
flex-direction: column;
padding-top: 1rem;
}
.mega-menu__column {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mega-menu .color-toggler {
margin: 0 0 1.5rem auto;
}
.mega-menu__nav {
margin-bottom: 2.5rem;
}
.mega-menu__menu {
flex-direction: column;
gap: 1rem 0;
}
.mega-menu__menu a {
font-size: 2rem;
line-height: 1.3;
color: var(--black);
font-family: "Benzin", serif;
font-weight: 500;
}
.mega-menu__menu a:hover {
color: var(--white);
}
.mega-menu.open {
opacity: 1;
pointer-events: all;
}
.mega-menu__address * {
color: var(--black);
}
@media (min-width: 375px) {
.mega-menu__menu a {
font-size: 3rem;
line-height: 1.2;
}
}
@media (max-width: 991.98px) {
.mega-menu .color-toggler {
order: 1;
}
.mega-menu__column {
order: 2;
}
.mega-menu__column--data {
order: 3;
height: auto;
padding-bottom: 2rem;
}
}
@media (min-width: 992px) {
.mega-menu {
padding: 22rem 0 6rem;
height: 100%;
}
.mega-menu .color-toggler {
display: none;
}
.mega-menu__container {
flex-direction: row;
max-width: 138rem;
overflow: unset;
justify-content: space-between;
padding-top: 0;
}
.mega-menu__list-title {
font-size: 2.5rem;
line-height: 1.4;
letter-spacing: 0.015rem;
font-weight: 500;
margin-bottom: 1.5rem;
text-transform: uppercase;
color: var(--black);
}
.mega-menu__list {
display: flex;
flex-direction: column;
gap: 1.5rem 0;
margin-bottom: 2.5rem;
}
.mega-menu__link {
font-size: 2.5rem;
line-height: 1.48;
font-weight: 500;
color: var(--black);
}
.mega-menu__link:hover {
color: var(--white);
}
.mega-menu__address {
color: var(--black);
font-size: 2.5rem;
line-height: 1.4;
letter-spacing: 0.015rem;
font-weight: 500;
margin-top: auto;
}
.mega-menu__address p {
margin-bottom: 2.5rem;
}
.mega-menu__address p:last-child {
margin-bottom: 0;
}
.mega-menu__nav {
margin-bottom: 2rem;
}
.mega-menu__menu {
gap: 1.1rem 0;
}
}
@media (min-width: 1700px) {
.mega-menu {
padding: 28rem 0 6rem;
}
.mega-menu__list-title {
margin-bottom: 4.5rem;
}
.mega-menu__list {
gap: 3.5rem 0;
margin-bottom: 5rem;
}
.mega-menu__menu a {
font-size: 4.5rem;
line-height: 1.4;
}
}
.mega-menu-links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
padding-bottom: 2rem;
}
.mega-menu-links .mega-menu-links__link {
color: var(--black);
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: 0.015rem;
}
.mega-menu-links .mega-menu-links__link:hover {
color: var(--white);
}
@media (min-width: 992px) {
.mega-menu-links {
padding-bottom: 0;
margin-top: auto;
gap: 1.8rem 2rem;
}
.mega-menu-links .mega-menu-links__link {
font-size: 2.5rem;
line-height: 1.4;
}
}
.wp-block-button:not(.is-style-arrow) .wp-block-button__link {
font-size: 2rem;
line-height: 1.1;
font-family: "Benzin", serif;
font-weight: 500;
color: var(--primary);
border: 0.2rem solid var(--primary);
background-color: var(--primary);
transition-property: background-color, color;
will-change: background-color, color;
transition: all 0.3s ease-in-out;
padding: 1.8rem 2.9rem 1.6rem;
border-radius: 0;
color: var(--black);
display: table;
}
.wp-block-button:not(.is-style-arrow) .wp-block-button__link:visited {
color: var(--black);
}
.wp-block-button:not(.is-style-arrow) .wp-block-button__link:hover {
background-color: transparent;
color: var(--primary);
}
.wp-block-button:not(.is-style-arrow).is-style-reverse .wp-block-button__link {
background-color: var(--black);
color: var(--white);
border: 0.2rem solid var(--black);
}
.wp-block-button:not(.is-style-arrow).is-style-reverse .wp-block-button__link:hover {
background-color: transparent;
color: var(--white);
}
.wp-block-button.is-style-arrow .wp-block-button__link, .wp-block-button.is-style-arrow-bottom .wp-block-button__link {
padding: 0;
display: block;
width: 6.5rem;
height: 5.8rem;
color: transparent;
background-color: var(--white-to-dark);
-webkit-mask: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/src/img/arrow.svg);
-webkit-mask-position: center;
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/src/img/arrow.svg);
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
will-change: transform, background-color;
transition-property: transform, background-color;
transition: all 0.3s ease-in-out;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover, .wp-block-button.is-style-arrow-bottom .wp-block-button__link:hover {
transform: translateX(0.5rem);
background-color: var(--primary);
}
.wp-block-button.is-style-arrow-bottom .wp-block-button__link {
transform: rotate(90deg);
}
.wp-block-button.is-style-arrow-bottom .wp-block-button__link:hover {
transform: rotate(90deg) translateX(0.5rem);
}
#cookie-notice:not(.cookie-notice-hidden) {
background-color: var(--dark-to-white) !important;
border-top: 0.1rem solid var(--color-1);
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container {
margin: 0 auto;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
display: flex !important;
flex-direction: column;
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container .cn-text-container {
margin-bottom: 1rem;
color: var(--white-to-dark);
font-size: 1.5rem;
line-height: 2rem;
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container a {
text-decoration: underline;
color: var(--primary);
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container a:hover {
color: var(--primary-to-text);
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container .cn-button {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: var(--primary);
border: 0.2rem solid var(--primary);
background-color: var(--primary) !important;
transition-property: background-color, color;
will-change: background-color, color;
transition: all 0.3s ease-in-out;
padding: 0.5rem 1.5rem;
border-radius: 0;
color: var(--black);
display: table;
text-decoration: none;
margin: 0 auto;
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container .cn-button:visited {
color: var(--black);
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container .cn-button:hover {
background-color: transparent !important;
color: var(--primary);
}
#cookie-notice:not(.cookie-notice-hidden) .cn-close-icon {
will-change: opacity;
transition: opacity 0.35s ease-in-out;
}
#cookie-notice:not(.cookie-notice-hidden) .cn-close-icon:before, #cookie-notice:not(.cookie-notice-hidden) .cn-close-icon:after {
background-color: var(--color-3);
}
@media (max-width: 991.98px) {
#cookie-notice:not(.cookie-notice-hidden) .cn-close-icon {
top: 1.5rem;
right: 0.75rem;
}
}
@media (min-width: 992px) {
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container {
justify-content: space-between;
flex-direction: row;
align-items: center;
padding: 1rem 1.5rem;
}
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container .cn-text-container {
margin: 0 1rem 0 0;
text-align: left;
}
}
.social-links__link {
text-decoration: underline;
font-size: 2.5rem;
line-height: 1.32;
font-weight: 500;
}
.social-links__link:hover {
text-decoration: underline;
}
@media (min-width: 992px) {
.social-links__link {
font-size: 2rem;
line-height: 1.35;
}
}
@media (min-width: 1700px) {
.social-links__link {
font-size: 2.5rem;
line-height: 1.32;
}
}
.scroll-btn {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
cursor: pointer;
}
.scroll-btn--bottom .scroll-btn__icon {
transform: scale(-1);
}
.scroll-btn__icon {
width: 8rem;
height: 8rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2.4rem;
background-color: var(--primary);
}
.scroll-btn__icon path {
stroke: var(--color-1);
}
.scroll-btn__text {
font-size: 2rem;
line-height: 1.35;
color: var(--color-1);
}
@media (min-width: 992px) {
.scroll-btn__icon {
background-color: transparent;
border: 0.2rem solid var(--color-1);
position: relative;
z-index: 1;
margin-bottom: 1.6rem;
width: 6rem;
height: 6rem;
}
.scroll-btn__icon:before {
border-radius: 50%;
background-color: var(--primary);
border-radius: 50%;
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
outline: 0.2rem solid var(--primary);
z-index: -1;
pointer-events: none;
will-change: opacity;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.scroll-btn:hover .scroll-btn__icon:before {
opacity: 1;
}
.scroll-btn__text {
font-size: 1.5rem;
line-height: 1.3333333333;
}
}
@media (min-width: 1700px) {
.scroll-btn__icon {
width: 8rem;
height: 8rem;
margin-bottom: 2.4rem;
}
.scroll-btn__text {
font-size: 2rem;
line-height: 1.35;
}
}
@media (min-width: 992px) {
.page-scrollers {
background-color: var(--dark-to-white);
position: absolute;
flex-direction: column;
left: 0;
height: 100%;
width: calc(max(10rem, 7%) - 0.1rem);
justify-content: space-between;
align-items: center;
padding: 20rem 0 10.5rem;
z-index: 1;
}
}
@media (min-width: 1700px) {
.page-scrollers {
width: calc(max(10rem, 14.5%) - 0.1rem);
padding: 65vh 0 10.5rem;
}
}
@media (min-width: 992px) {
.custom-cursor {
width: 9.7rem;
height: 9.7rem;
background-color: var(--primary);
border-radius: 50%;
align-items: center;
justify-content: center;
opacity: 0;
will-change: opacity;
position: absolute;
transition: opacity 0.3s ease-in-out;
transform: translate(-50%, -50%);
pointer-events: none;
user-select: none;
visibility: hidden;
}
.custom-cursor.active {
opacity: 1;
visibility: visible;
}
.custom-cursor__text {
font-size: 1.9rem;
line-height: 1;
font-weight: 600;
color: var(--black);
}
}
@media (min-width: 992px) {
.hide-cursor {
cursor: none;
}
}
.phone {
position: fixed;
background-color: var(--primary);
border-radius: 50%;
bottom: 1rem;
right: 1rem;
width: 4.8rem;
height: 4.8rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 97;
border: 0.2rem solid var(--primary);
transition: background-color 0.3s ease-in-out;
}
.phone g {
fill: var(--white-to-dark);
will-change: fill;
transition: fill 0.3s ease-in-out;
}
.phone:hover g {
fill: var(--dark-to-white);
}
@media (min-width: 992px) {
.phone {
width: 6.5rem;
height: 6.5rem;
bottom: 3.5rem;
right: 3.5rem;
}
.phone svg {
width: 2.5rem;
}
}
.header {
padding: 1.5rem 0;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 99;
background-color: var(--dark-to-white);
transition: all 0.3s ease-in-out;
}
.header.sticky {
background-color: var(--dark-to-white);
}
.header.active {
background-color: var(--primary);
}
.header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__brand {
width: 16rem;
display: block;
position: relative;
z-index: 1;
will-change: transform;
transition: transform 0.3s ease-in-out;
}
.header__logo {
will-change: filter, opacity;
transition-property: filter, opacity;
transition: all 0.3s ease-in-out;
}
.header.active .header__brand {
filter: invert(1);
}
.header.active .header-icon__line {
background-color: var(--black);
}
@media (max-width: 991.98px) {
.header .color-toggler,
.header .header-links {
display: none;
}
.header.active {
padding-bottom: 0;
}
.header.active.sticky {
padding-bottom: 0;
}
.header #text {
display: none;
}
}
@media (min-width: 992px) {
.header {
padding: 2.5rem 0;
}
.header__brand {
width: 9.5rem;
}
.header__brand #text {
will-change: opacity, transform;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.header__brand #logo {
will-change: transform;
transition: transform 0.5s ease-in-out;
}
.header.sticky {
padding: 1.5rem 0;
}
.header.sticky .header__controls {
transform: translateX(50vw);
}
.header.sticky .header__brand #text {
opacity: 0;
transform: translateX(-52%);
}
.header.sticky .header__brand #logo {
transform: translateX(32%);
}
.header__menu {
will-change: opacity;
transition: opacity 0.3s ease-in-out;
}
.header__controls {
will-change: opacity, transform;
transition-property: opacity, transform;
transition: all 0.3s ease-in-out;
}
.header.active .header__menu,
.header.active .header__controls {
opacity: 0;
pointer-events: none;
}
.header__wrapper {
max-width: 133rem;
margin: 0 auto;
justify-content: flex-start;
}
.header__menu {
display: flex;
flex-direction: row;
gap: 0 1.5rem;
padding-left: 7.5%;
}
.header__menu a {
font-size: 2rem;
line-height: 1.35;
letter-spacing: 0.02rem;
color: var(--white-to-dark);
font-weight: 500;
padding-bottom: 0.75rem;
position: relative;
white-space: nowrap;
z-index: 1;
display: inline-block;
}
.header__menu a:before {
content: "";
position: absolute;
left: 0;
bottom: 1.15rem;
width: 100%;
height: 0.9rem;
background-color: var(--primary);
opacity: 0;
will-change: opacity;
z-index: -1;
transition: opacity 0.3s ease-in-out;
}
.header__menu a:hover:before {
opacity: 1;
}
.header__menu .current_page_item > a:before {
opacity: 1;
}
.header__wrapper {
position: relative;
}
.header .header-icon {
margin-left: auto;
}
.header__controls {
position: absolute;
top: 15.5rem;
right: 3.5rem;
display: flex;
flex-direction: column;
}
.header__controls .color-toggler {
margin-bottom: 6.5rem;
}
}
@media (min-width: 1300px) {
.header__brand {
width: 18rem;
}
}
@media (min-width: 1260px) {
.header__menu {
gap: 0 3.5rem;
}
}
@media (min-width: 1700px) {
.header__menu {
padding-left: 10%;
gap: 0 7rem;
}
.header__menu a {
font-size: 2.5rem;
line-height: 1.32;
}
}
@media (min-width: 1820px) {
.header .header__wrapper {
max-width: 176rem;
}
}
.header-icon {
width: 4.5rem;
height: 3.5rem;
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
z-index: 1;
}
.header-icon__line {
position: absolute;
width: 100%;
height: 0.2rem;
background-color: var(--white-to-dark);
left: 0;
will-change: transform;
transition: transform 0.3s ease-in-out;
}
.header-icon__line:first-of-type {
top: 0.7rem;
}
.header-icon__line:nth-child(2) {
bottom: 0.7rem;
}
.header-icon.active .header-icon__line:first-of-type {
transform: rotate(45deg) translate(0.8rem, 0.6rem);
}
.header-icon.active .header-icon__line:nth-child(2) {
transform: rotate(-45deg) translate(0.8rem, -0.6rem);
}
@media (min-width: 992px) {
.header-icon {
height: 4.5rem;
}
.header-icon.active .header-icon__line:first-of-type {
transform: rotate(45deg) translate(1.3rem, 0.9rem);
}
.header-icon.active .header-icon__line:nth-child(2) {
transform: rotate(-45deg) translate(1.3rem, -0.9rem);
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.header-icon {
width: 5.7rem;
}
}
@media (min-width: 1200px) {
.header-icon {
width: 9.7rem;
}
}
.light-mode .color-toggler__slider {
transform: translateX(1rem) translateY(-50%);
}
.light-mode .color-toggler__text:first-child {
opacity: 0;
}
.light-mode .color-toggler__text:last-child {
opacity: 1;
}
.light-mode .header__brand {
filter: invert(1);
}
@media (min-width: 992px) {
.light-mode .color-toggler__slider {
transform: translateX(0.8rem) translateY(-50%);
}
}
.color-toggler {
text-align: center;
width: 6rem;
}
.color-toggler__texts {
position: relative;
}
.color-toggler__text {
font-size: 1.4rem;
line-height: 1.5;
color: var(--black);
will-change: opacity;
transition: opacity 0.3s ease-in-out;
display: block;
width: 100%;
}
.color-toggler__text:first-child {
opacity: 1;
}
.color-toggler__text:last-child {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
}
.color-toggler__switch {
border-radius: 1.9rem;
background-color: var(--black);
width: 100%;
height: 2.5rem;
display: block;
position: relative;
cursor: pointer;
padding: 0 1rem;
margin-bottom: 0.5rem;
}
.color-toggler__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
.color-toggler__slider {
position: absolute;
width: 1.5rem;
height: 1.5rem;
display: block;
border-radius: 50%;
background-color: var(--primary);
left: 0;
top: 50%;
transform: translateY(-50%) translateX(3.75rem);
will-change: transform;
transition: transform 0.3s ease-in-out;
}
@media (min-width: 992px) {
.color-toggler {
width: 9.6rem;
}
.color-toggler__text {
color: var(--white-to-dark);
text-align: center;
font-size: 2rem;
line-height: 1.35;
}
.color-toggler__switch {
background-color: transparent;
border: 0.2rem solid var(--white-to-dark);
height: 3.7rem;
margin-bottom: 1.6rem;
}
.color-toggler__slider {
transform: translateY(-50%) translateX(6.2rem);
width: 2.3rem;
height: 2.3rem;
}
}
@media (min-width: 992px) {
.header-links {
display: flex;
flex-direction: column;
gap: 7.5rem 0;
}
.header-links__link {
text-decoration: underline;
writing-mode: vertical-rl;
text-orientation: mixed;
display: block;
margin: 0 auto;
}
.header-links__link:hover {
text-decoration: underline;
color: var(--primary-to-text);
}
}
.footer {
padding: 0 0 5rem;
}
.footer .header__brand {
width: 100%;
padding-bottom: 6.8rem;
margin: 0 auto 7.8rem;
border-bottom: 0.1rem solid var(--color-1);
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
position: unset;
}
.footer .header__brand svg {
min-width: 13.5rem;
}
.footer .header__logo {
opacity: 1;
}
.footer .header__logo--second {
display: none;
}
.footer__title {
color: var(--white-to-dark);
margin-bottom: 5rem;
font-size: 3.5rem;
line-height: 1;
font-weight: 500;
}
.footer__address {
font-size: 2rem;
line-height: 1.25;
font-weight: 500;
margin-bottom: 6.5rem;
}
.footer__address * {
color: var(--white-to-dark);
}
.footer__address p {
margin-bottom: 3.2rem;
}
.footer__address p:last-child {
margin-bottom: 0;
}
.footer__address a:hover {
color: var(--primary);
}
.footer__newsletter {
margin-bottom: 3rem;
}
.footer__newsletter-title {
color: var(--primary);
display: block;
margin-bottom: 4rem;
font-size: 2rem;
line-height: 1.35;
letter-spacing: 0.015rem;
text-transform: uppercase;
font-weight: 400;
}
.footer__newsletter-subtitle {
font-size: 1.3rem;
line-height: 1.3076923077;
letter-spacing: 0.015rem;
color: var(--color-2);
font-weight: 400;
margin-bottom: 2rem;
}
.footer form br {
display: none;
}
.footer form p {
margin-bottom: 0;
}
.footer form .wp-block-button button.wp-block-button__link {
font-size: 1.2rem;
line-height: 1.0833333333;
font-weight: 700;
height: 4rem;
width: 11rem;
padding: 0;
}
.footer form .wpcf7-not-valid-tip {
display: block;
margin: 1rem 0;
}
.footer form .wpcf7-not-valid-tip,
.footer form .wpcf7-response-output {
color: var(--white-to-dark);
font-size: 1.3rem;
line-height: 1.5384615385;
letter-spacing: 0.015rem;
}
.footer input {
background-color: transparent;
border-radius: 0;
color: var(--white-to-dark);
height: 4rem;
border: 0.1rem solid var(--white-to-dark);
padding: 0 1.5rem;
width: 100%;
color: var(--white-to-dark);
font-size: 1.3rem;
line-height: 1.5384615385;
letter-spacing: 0.015rem;
}
.footer .form-row {
display: grid;
grid-template-columns: 1fr 11rem;
gap: 0 0.4rem;
}
.footer__copy {
font-size: 1.5rem;
line-height: 1.3333333333;
letter-spacing: 0.0225rem;
color: var(--color-1);
margin-bottom: 3.8rem;
display: block;
}
.footer__copy a {
color: var(--color-1);
}
.footer__copy a:hover {
color: var(--primary);
}
@media (min-width: 992px) {
.footer {
padding: 0 0 10.5rem;
position: relative;
}
.footer__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 7rem 0;
}
.footer .header__brand {
border-bottom: 0;
padding: 0;
margin-bottom: 8.5rem;
display: flex;
gap: 0 15%;
align-items: center;
justify-content: space-between;
}
.footer .header__brand:before, .footer .header__brand:after {
content: "";
display: flex;
background-color: var(--color-2);
width: 100%;
height: 0.1rem;
}
.footer__title {
font-size: 5.5rem;
line-height: 1.1818181818;
margin-bottom: 0;
}
.footer__address {
margin: 0 auto 0;
}
.footer__inner-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 0 3.5rem;
align-items: flex-end;
}
.footer__newsletter {
max-width: 50%;
width: 100%;
margin-bottom: 0;
}
.footer__newsletter-form {
max-width: 70%;
}
.footer__copy {
margin: 0;
}
.footer form .wp-block-button button.wp-block-button__link {
width: 15.5rem;
font-size: 1.5rem;
line-height: 0.8666666667;
}
}
@media (min-width: 1700px) {
.footer {
padding: 0 0 20rem;
}
.footer__row {
gap: 10.5rem 0;
}
.footer__title {
font-size: 7.5rem;
line-height: 1.1333333333;
}
.footer__address {
font-size: 2.5rem;
line-height: 1.4;
}
.footer form input {
height: 4.8rem;
}
.footer form .wp-block-button button.wp-block-button__link {
height: 4.8rem;
}
.footer__scroll-top {
bottom: 8rem;
}
}
.footer-socials {
display: flex;
flex-direction: column;
gap: 4rem;
margin-bottom: 7rem;
}
.footer-socials__link {
font-size: 2rem;
line-height: 1.75;
letter-spacing: 0.015rem;
font-weight: 500;
}
.footer-socials__link:hover {
color: var(--primary-to-text);
}
@media (min-width: 992px) {
.footer-socials {
gap: 2rem 0;
margin-bottom: 0;
}
}
@media (min-width: 992px) {
.footer-socials {
gap: 3.4rem 0;
}
.footer-socials__link {
font-size: 2.5rem;
}
}
.ml-form-successBody {
position: relative;
margin: 1.5rem 0;
width: 100%;
height: 100%;
}
.section-404 {
padding: 22.5rem 0 3.8rem;
}
.section-404__content {
display: flex;
flex-direction: column;
gap: 4rem 0;
}
.section-404__title {
color: var(--white-to-dark);
font-size: 2.8rem;
line-height: 1.25;
font-family: "Benzin", serif;
font-weight: 500;
}
@media (min-width: 992px) {
.section-404 {
padding: 31rem 0 8rem;
}
.section-404__content {
gap: 6rem 0;
}
.section-404__title {
font-size: 3rem;
line-height: 1.2333333333;
max-width: 70%;
}
}
@media (min-width: 1700px) {
.section-404 {
padding: 31rem 0 12.25rem;
}
.section-404__title {
font-size: 4.5rem;
line-height: 1.2222222222;
}
}:root {
--primary: #ffaa00;
--white: #ffffff;
--bg: #1b1c1e;
--black: #1b1c1e;
--color-1: #7b7b7b;
--color-2: #676767;
--color-3: #a3a3a3;
--color-4: #be8809;
--color-5: #a1a1a1;
--color-6: #9d9d9d;
--color-7: #262627;
--color-8: #a2a2a2;
--color-9: #707070;
--color-10: #282829;
--white-to-dark: #ffffff;
--white-to-black: #fff;
--dark-to-white: #1b1c1e;
--primary-to-text: #ffffff;
}
.light-mode {
--white-to-dark: #1b1c1e;
--white-to-black: #000;
--dark-to-white: #ffffff;
--color-7: #f6f6f6;
--color-10: #a3a3a3;
--primary-to-text: #1b1c1e;
}
.hero {
padding: 9.5rem 0 3.8rem;
}
.hero__content {
color: var(--white-to-dark);
}
.hero__content h1,
.hero__content h2 {
font-family: "Benzin", serif;
font-weight: 500;
font-size: 3rem;
line-height: 1.1666666667;
}
.hero__content p {
margin-top: 6rem;
font-size: 2rem;
line-height: 1.25;
letter-spacing: 0.015rem;
}
@media (min-width: 575px) {
.hero__content h1,
.hero__content h2 {
font-size: 4.5rem;
line-height: 1.1111111111;
}
.hero__content p {
margin-top: 11rem;
}
}
@media (max-width: 575.98px) {
.hero__content h1 br,
.hero__content h2 br {
display: none;
}
}
@media (min-width: 992px) {
.hero {
padding: 16rem 0 6rem;
}
.hero__content h1,
.hero__content h2 {
font-size: 7rem;
line-height: 1;
}
.hero__content h1 br,
.hero__content h2 br {
display: block;
}
.hero__content p {
margin-top: 6.5rem;
max-width: 80rem;
}
}
@media (min-width: 1700px) {
.hero {
padding: 20rem 0 12.25rem;
}
.hero__content h1,
.hero__content h2 {
font-size: 9rem;
line-height: 1.3;
}
.hero__content p {
font-size: 2.5rem;
line-height: 1.4;
margin-top: 8rem;
max-width: 114rem;
}
}:root {
--primary: #ffaa00;
--white: #ffffff;
--bg: #1b1c1e;
--black: #1b1c1e;
--color-1: #7b7b7b;
--color-2: #676767;
--color-3: #a3a3a3;
--color-4: #be8809;
--color-5: #a1a1a1;
--color-6: #9d9d9d;
--color-7: #262627;
--color-8: #a2a2a2;
--color-9: #707070;
--color-10: #282829;
--white-to-dark: #ffffff;
--white-to-black: #fff;
--dark-to-white: #1b1c1e;
--primary-to-text: #ffffff;
}
.light-mode {
--white-to-dark: #1b1c1e;
--white-to-black: #000;
--dark-to-white: #ffffff;
--color-7: #f6f6f6;
--color-10: #a3a3a3;
--primary-to-text: #1b1c1e;
}
.cta {
padding: 5.5rem 0 8.5rem;
}
.cta__content {
position: relative;
padding: 3.8rem 0 0 0;
border-top: 0.1rem solid var(--color-1);
}
.cta__content--disable-top-border {
padding: 0;
}
.cta__content {
color: var(--white-to-dark);
}
.cta__content--disable-top-border {
border-top: none;
}
.cta__content--disable-top-border:before {
display: none;
}
.cta__content .is-style-subheading {
margin-bottom: 5rem;
font-size: 2rem;
line-height: 1.35;
letter-spacing: 0.02rem;
font-weight: 600;
color: var(--primary);
}
.cta__content h1,
.cta__content h2 {
font-family: "Benzin", serif;
font-weight: 500;
font-size: 2.8rem;
line-height: 1.3571428571;
margin-bottom: 5rem;
}
.cta__content h3 {
font-family: "Benzin", serif;
font-weight: 500;
font-size: 2rem;
line-height: 1.2;
margin-bottom: 5rem;
}
@media (min-width: 992px) {
.cta {
padding: 8rem 0 14rem;
}
.cta--has-no-top-border {
padding: 5.5rem 0 15rem;
}
.cta__content {
padding-top: 8rem;
}
.cta__content .is-style-subheading,
.cta__content h1,
.cta__content h2,
.cta__content h3 {
margin-bottom: 3.8rem;
}
.cta__content h1,
.cta__content h2 {
font-size: 5.5rem;
line-height: 1;
}
.cta__content h3 {
font-size: 4rem;
line-height: 1.2;
}
.cta__content--disable-top-border {
padding-top: 8.5rem;
border-top: 0.1rem solid var(--color-1);
}
}
@media (min-width: 1700px) {
.cta {
padding: 12.5rem 0 29rem;
}
.cta--has-no-top-border {
padding: 5.5rem 0 15rem;
}
.cta__content {
padding-top: 19rem;
}
.cta__content h1,
.cta__content h2 {
font-size: 8rem;
line-height: 1;
}
.cta__content .is-style-subheading {
font-size: 2.5rem;
line-height: 1.4;
}
.cta__content:before {
content: "";
position: absolute;
top: -0.1rem;
left: -50%;
width: 200%;
height: 0.1rem;
background-color: var(--color-1);
}
.cta__content--disable-top-border {
padding: 0;
border: none;
}
}:root {
--primary: #ffaa00;
--white: #ffffff;
--bg: #1b1c1e;
--black: #1b1c1e;
--color-1: #7b7b7b;
--color-2: #676767;
--color-3: #a3a3a3;
--color-4: #be8809;
--color-5: #a1a1a1;
--color-6: #9d9d9d;
--color-7: #262627;
--color-8: #a2a2a2;
--color-9: #707070;
--color-10: #282829;
--white-to-dark: #ffffff;
--white-to-black: #fff;
--dark-to-white: #1b1c1e;
--primary-to-text: #ffffff;
}
.light-mode {
--white-to-dark: #1b1c1e;
--white-to-black: #000;
--dark-to-white: #ffffff;
--color-7: #f6f6f6;
--color-10: #a3a3a3;
--primary-to-text: #1b1c1e;
}
.faq {
padding: 3rem 0 3.5rem;
}
.faq__content {
margin-bottom: 3.5rem;
}
.faq__content h1,
.faq__content h2 {
font-size: 2rem;
line-height: 1.2;
letter-spacing: 0.02rem;
margin-bottom: 2rem;
font-weight: 600;
}
.faq__list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2.6rem 0;
}
.faq__item {
padding-bottom: 1.8rem;
border-bottom: 0.1rem solid var(--color-1);
}
.faq__item.is-active .faq__icon:before {
opacity: 0;
transform: translate(-50%, -50%) rotate(-90deg);
}
.faq__item.is-active .faq__icon:after {
background-color: var(--primary);
}
.faq__trigger {
width: 100%;
cursor: pointer;
display: grid;
grid-template-columns: 7.5rem 1fr;
}
.faq__item-title {
text-align: left;
color: var(--white-to-dark);
display: block;
font-size: 2rem;
line-height: 1.25;
font-weight: 500;
}
.faq__icon {
display: block;
width: 3rem;
height: 3rem;
position: relative;
}
.faq__icon:before, .faq__icon:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-9);
}
.faq__icon:before {
width: 0.7rem;
height: 100%;
will-change: opacity, transform;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.faq__icon:after {
width: 100%;
height: 0.7rem;
will-change: background-color;
}
.faq__body {
padding: 3rem 0 0 7.5rem;
color: var(--color-3);
font-size: 2rem;
line-height: 1.25;
letter-spacing: 0.015rem;
font-weight: 500;
}
@media (min-width: 992px) {
.faq {
padding: 3.25rem 0 5rem;
}
.faq__content {
margin-bottom: 6rem;
}
.faq__content h1,
.faq__content h2 {
font-size: 2.5rem;
line-height: 1.4;
}
.faq .accordion-container {
gap: 3.5rem 0;
}
.faq__item {
padding-bottom: 3.5rem;
}
.faq__trigger {
grid-template-columns: 13.5rem 1fr;
}
.faq__item-title {
font-size: 2.2rem;
line-height: 1.1363636364;
}
.faq__body {
padding: 5rem 0 0 13.5rem;
}
}
@media (min-width: 1700px) {
.faq {
padding: 7.5rem 0 8rem;
}
.faq__item {
padding-bottom: 3rem;
}
.faq__item-title {
font-size: 2.5rem;
line-height: 1.4;
}
.faq__body {
font-size: 2.5rem;
line-height: 1;
padding-bottom: 3rem;
}
}:root {
--primary: #ffaa00;
--white: #ffffff;
--bg: #1b1c1e;
--black: #1b1c1e;
--color-1: #7b7b7b;
--color-2: #676767;
--color-3: #a3a3a3;
--color-4: #be8809;
--color-5: #a1a1a1;
--color-6: #9d9d9d;
--color-7: #262627;
--color-8: #a2a2a2;
--color-9: #707070;
--color-10: #282829;
--white-to-dark: #ffffff;
--white-to-black: #fff;
--dark-to-white: #1b1c1e;
--primary-to-text: #ffffff;
}
.light-mode {
--white-to-dark: #1b1c1e;
--white-to-black: #000;
--dark-to-white: #ffffff;
--color-7: #f6f6f6;
--color-10: #a3a3a3;
--primary-to-text: #1b1c1e;
}
.tables {
padding: 1.2rem 0 3rem;
}
@media (min-width: 992px) {
.tables .splide {
margin-left: min(-10rem, -7%);
position: relative;
z-index: 1;
max-width: none;
width: calc(100% + max(10rem, 7%));
}
.tables .splide__slide {
flex-shrink: unset;
}
}
@media (min-width: 1700px) {
.tables .splide {
margin-left: 0;
width: 100%;
max-width: 100%;
}
}
.tables .splide__track {
padding-bottom: 2.5rem;
border-bottom: 0.1rem solid var(--color-1);
}
.tables .splide__arrows {
display: grid;
grid-template-columns: repeat(2, 6rem);
gap: 0 2.8rem;
}
.tables .splide__arrow {
width: 6rem;
height: 6rem;
position: relative;
cursor: pointer;
background-color: var(--color-10);
}
.tables .splide__arrow:before {
content: "";
position: absolute;
width: 1.8rem;
height: 1.8rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(//przestrzenie.pl/wp-content/themes/przestrzenie-theme/assets/dist/svg/table-slider-arrow-black.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
will-change: opacity;
transition: opacity 0.3s ease-in-out;
}
.tables .splide__arrow--prev:before {
transform: translate(-50%, -50%) scale(-1);
}
.tables .splide__arrow:disabled {
cursor: default;
}
.tables .splide__arrow:disabled:before {
opacity: 0.15;
}
.tables .splide__arrow svg {
display: none;
}
.tables .splide__slide {
width: 100%;
}
.tables__back-btn {
color: var(--white-to-dark);
text-decoration: underline;
text-transform: uppercase;
font-weight: 600;
font-size: 2rem;
line-height: 1.5;
letter-spacing: 0.015rem;
display: block;
}
.tables__back-btn:hover {
color: var(--primary);
text-decoration: underline;
}
.tables__back-btn--bottom {
margin-top: 2.5rem;
text-align: center;
}
.tables__row {
display: flex;
flex-wrap: wrap;
gap: 1.4rem 2.8rem;
align-items: center;
margin-bottom: 4.5rem;
}
.tables__row .tables__caption {
display: none;
}
@media (max-width: 991px) {
.tables__row {
flex-direction: column;
margin-bottom: 20px;
width: 100%;
align-items: center;
}
.tables__row .tables__caption {
display: inline-block;
margin-bottom: -54px;
text-align: center;
}
.tables__row .tables__content {
order: 0;
margin-bottom: 30px;
}
.tables__row .splide__arrows {
order: 1;
margin: 0 0 0px;
width: 100%;
display: flex;
justify-content: space-between;
}
}
@media (min-width: 992px) {
.tables {
padding: 0rem 0 5rem;
}
.tables .splide {
visibility: visible;
padding: 0;
}
.tables .splide__arrows {
display: none;
}
.tables .splide__slide {
height: auto;
}
.tables .splide__track {
border: 0.1rem solid var(--color-1);
padding-bottom: 0;
}
.tables__back-btn {
font-size: 2.5rem;
line-height: 1.4;
}
.tables__row {
margin-bottom: 2.5rem;
}
}
@media (min-width: 1260px) {
.tables {
padding-top: 2.4rem;
}
}
.table-item {
display: flex;
flex-direction: column;
}
.table-item__title {
font-size: 2rem;
line-height: 1.35;
letter-spacing: 0.015rem;
text-transform: uppercase;
margin-bottom: 3rem;
color: var(--black);
background: var(--primary);
order: 1;
padding: 1.5rem 1.5rem;
}
@media (min-width: 992px) {
.table-item__title {
min-height: 8rem;
}
}
.table-item__caption {
font-size: 1.6rem;
line-height: 1.35;
letter-spacing: 0.015rem;
font-weight: 500;
display: block;
margin-bottom: 4.5rem;
color: var(--color-3);
order: 2;
}
.table-item__price {
order: 3;
display: block;
position: relative;
padding: 1.4rem 3.5rem 1.4rem 3.4rem;
color: var(--white-to-dark);
margin-bottom: 5.5rem;
}
.table-item__price:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: var(--color-10);
border-bottom: 0.1rem solid var(--color-1);
pointer-events: none;
}
.table-item__price-text {
position: relative;
z-index: 1;
font-size: 2rem;
line-height: 1.25;
letter-spacing: 0.015rem;
font-weight: 500;
}
.table-item__content {
color: var(--white-to-dark);
}
.table-item__content p {
font-size: 2rem;
line-height: 1.35;
letter-spacing: 0.015rem;
font-weight: 500;
margin-bottom: 6rem;
}
.table-item__content ul {
list-style: none;
padding-left: 0;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem 0;
}
.table-item__content ul li {
padding-left: 2rem;
position: relative;
font-weight: 500;
font-size: 1.6rem;
line-height: 1.35;
letter-spacing: 0.015rem;
color: var(--color-3);
}
.table-item__content ul li:before {
content: "";
position: absolute;
left: 0;
top: 0.7rem;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background-color: var(--primary);
}
.table-item__content {
order: 4;
}
@media (min-width: 992px) {
.table-item {
height: 100%;
padding: 0rem 1.5rem 0;
border-right: 0.1rem solid var(--color-1);
}
.table-item__title {
margin: 0 -1.5rem 3rem;
padding: 3.5rem 1.5rem;
}
.table-item__caption {
margin-bottom: 4rem;
max-width: 35rem;
min-height: 10rem;
}
.table-item__content {
order: 3;
margin-bottom: 6.5rem;
}
.table-item__price {
order: 4;
margin-bottom: 0;
}
.table-item__price:before {
border: none;
left: -1.8rem;
width: calc(100% + 3.6rem);
}
}
@media (max-width: 1279px) {
.table-item .table-item__title {
padding: 1.5rem;
font-size: 1.5rem;
}
}
@media (max-width: 1919px) {
.table-item .table-item__title {
padding: 1.5rem;
min-height: 0;
}
}
@media (min-width: 992px) {
.splide.tables__mobile__slider {
display: none;
}
}
@media (max-width: 991px) {
.fixed-nav .tables__over__mobile__slider {
position: fixed;
left: 0;
top: 86px;
z-index: 100;
width: 100%;
}
.tables__over__mobile__slider {
background: var(--primary);
}
.tables__over__mobile__slider .container {
padding-right: 1.5rem;
}
.tables__over__mobile__slider .tables__caption {
color: var(--black);
margin: 10px 0 -24px;
}
.tables__over__mobile__slider .tables__row {
margin: 0;
}
.tables__over__mobile__slider .splide__arrow {
width: auto;
height: auto;
background: transparent;
}
.tables__over__mobile__slider .table-item__title {
background: transparent;
}
.splide.tables__mobile__slider {
width: 100%;
}
.splide.tables__mobile__slider .splide__slide {
width: auto;
}
.splide.tables__mobile__slider .splide__slide .table-item__title {
color: var(--color-4);
}
.splide.tables__mobile__slider .splide__slide.is-active .table-item__title {
color: var(--black);
}
.splide.tables__mobile__slider .table-item__title {
margin-bottom: 0;
}
.splide.tables__mobile__slider .table-item__title br {
display: none;
}
.splide.tables__mobile__slider .splide__track {
margin-top: 8px;
padding-bottom: 0;
border-bottom: 0;
}
.tables__slider {
padding-top: 30px;
}
.tables__slider .table-item__title {
display: none;
}
}