.rotate-z-1 {
    transform: rotateZ(var(--rotate-z-1));
}

.brxe-section {
    padding-right: var(--section-padding-x-desktop);
    padding-left: var(--section-padding-x-desktop);
    display: block;
    max-width: 100%
}

html {
    background-color: var(--bg-primary)
}

body {
    background: none
}

.brxe-container {
    width: 100%;
    max-width: var(--container-width-full);
    display: flex
}

.woocommerce main.site-main {
    width: 100%
}

#brx-content.wordpress {
    width: 100%;
    max-width: var(--container-width-full)
}

html {
    font-size: 100%
}

body {
    font-size: var(--text-s);
    font-family: "Finlandica";
    line-height: var(--line-height-paragraph)
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--heading-font-weight)
}

h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1)
}

h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2)
}

h3 {
    font-size: var(--text-l);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-h3)
}

h4 {
    font-size: var(--text-m);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-h4);
    letter-spacing: var(--letter-spacing-h4)
}

.bricks-button {
    line-height: 1;
    letter-spacing: var(--letter-spacing-sm);
    font-weight: 500;
    text-transform: uppercase;
    font-size: calc(var(--text-2xs) - 1px);
    border-radius: 3rem;
    padding-top: .75em;
    padding-right: 1.625em;
    padding-bottom: .75em;
    padding-left: 1.625em
}

:root .bricks-button[class*="primary"]:not(.outline) {
    background-color: var(--color-primary)
}

:root .bricks-button[class*="primary"] {
    color: var(--color-white)
}

@media (max-width: 991px) {
    .brxe-section {
        padding-right: var(--section-padding-x-tablet);
        padding-left: var(--section-padding-x-tablet)
    }
}

@media (max-width: 767px) {
    .brxe-section {
        padding-right: var(--section-padding-x-mobile);
        padding-left: var(--section-padding-x-mobile)
    }
}

@media (max-width: 478px) {
    .brxe-section {
        padding-right: var(--section-padding-x-mobile);
        padding-left: var(--section-padding-x-mobile)
    }
}