:root {
    --primary-color: rgba(11, 104, 34, 1);
    --text-color: rgba(0, 0, 0, 1);
    --secondary-color: rgba(138, 138, 138, 1);
    --secondary-color-light: rgba(243, 243, 243, 1);
    --white: rgba(255, 255, 255, 1);
    --accent-red: rgba(218, 34, 44, 1);
    --accent-red-light: rgba(244, 185, 188, 1);
    --accent-green: rgba(167, 236, 98, 1);
    --light-green: rgba(242, 251, 228, 1);
    --gap-gutter-y: 5rem;
    --screen-scale: 1;
}

* {
    margin: 0;
    text-decoration: none !important;
}

.primary-color {
    color: var(--primary-color);
}

.secondary-color {
    color: var(--secondary-color);
}

.white-color {
    color: var(--white);
}

.accent-red-color {
    color: var(--accent-red);
}

h1 {
    font-size: calc(3rem * var(--screen-scale));
    text-align: center;
    font-weight: 700;
    margin: 0;
}

h2 {
    font-size: calc(2.5rem * var(--screen-scale));
    text-align: center;
    font-weight: 700;
    margin: 0;
}

h3 {
    font-size: calc(2rem * var(--screen-scale));
    font-weight: 700;
    margin: 0;
}

h4 {
    font-size: calc(1.5rem * var(--screen-scale));
    margin: 0;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-size: calc(1.125rem * var(--screen-scale));
    text-decoration: none;
    width: 100vw;
    overflow-x: hidden;
}

.umb-block-grid img {
    max-width: 100%;
}

.umb-block-grid iframe {
    max-width: 100%;
}

.umb-block-grid__layout-item:not(:last-child) {
    margin-bottom: 1rem;
}

.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
}

.umb-block-grid__layout-item {
    position: relative;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--areas-column-gap, 0);
    row-gap: var(--umb-block-grid--areas-row-gap, 0);
}

.umb-block-grid__area {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

@media (min-width:1366px) {
    .umb-block-grid__layout-item {
        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    }

    .umb-block-grid__area {
        grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
    }
}