/* AutoCSS 2.0 Nov 2024 Developed by Laman7 https://github.com/edwin-laman7/autoCSS */
/* Be sure AutoCSS variables above the line or loads before this */
/* Made by Laman7 */

html {font-size:100%; font-family: "Hanken Grotesk"; }
:root {
    /* Colors */
	--primary: #7060C1;
	--primary-off: #3a2f75;
	--secondary: #9A338E;
  	--secondary-off: #89287D;
  	--accent: #62D1B0;
  	--accent-off: #00C9B7;
  	--body-color: #241C4C;
	--body-off: #362E62;
  	--white: #FFFFFF;
  	--base: #F7F7F7;
	--grey-light: #D8D3ED;
	--grey: #9D90D9;
	--grey-mid: #5B4CA4;
	--grey-dark: #241C4C;
	--black: #0F0719;
	
	--highlight: #2B7D2744;
	--highlight-dark: #2B7D2777;
	
    --hover-brightness: 1.3;
    --border-radius: 0.5rem;
    --btn-radius: 2rem;
	--btn-hover: "\00BB";
    --btn-outline-border: 2px;
	/* 
	\2192 for arrow
	\203A for single right chevron
	\00BB for double right chevron
	*/

     /* Delete to use Bricks Default */
     --bricks-color-primary: var(--primary) !important; 
     --bricks-color-secondar: var(--secondary) !important;
 
     --xxxl: 7.5rem     ; /* changed 120px*/
     --xxl: 5rem        ; /* H1 80px */
     --xl: 3.375rem     ; /* H2 54px */
     --l: 2.25rem       ; /* H3 36px */
     --m: 1.5rem        ; /* H4 24px */
     --body: 1.125rem   ; /* 18px */
     --s: 1rem          ; /* 16px */
     --xs:0.667rem      ; /* changed 10px*/
     --lh-xxxl: 1.2em;
     --lh-h1: 1.1em;
     --lh-h2: 1.3em;
     --lh-heading: 1.3em;
     --lh-body: 1.5em;
     --lh-btn: 1em;
     --ls-heading:-0.025em;
     --ls-h1:-0.025em;
     --ls-h2:-0.025em;
     --col:7rem;
     --btn-on: 3rem; /*Turn button when a number exists*/
     
     --clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
     --clamp-xxl: clamp(2.5rem, calc(2.5rem + ((1vw - 0.3rem) * 4.8077)), var(--xxl));
     --clamp-xl: clamp(1.75rem, calc(1.75rem + ((1vw - 0.3rem) * 2.4038)), var(--xl));
     --clamp-l: clamp(1.5rem, calc(1.5rem + ((1vw - 0.3rem) * 0.9615)), var(--l));
     --clamp-m: clamp(1.125rem, calc(1.125rem + ((1vw - 0.3rem) * 0.7212)), var(--m));
     --clamp-s: clamp(0.875rem, calc(0.875rem + ((1vw - 0.3rem) * 0.2404)), var(--s));
     --clamp-xs: clamp(0.625rem, calc(0.625rem + ((1vw - 0.3rem) * 0.2404)), var(--xs));
         
     --clamp-body: clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 0.2404)), var(--body));
     --clamp-section: clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 3.8462)), 3rem);
 
     --width-card: 26rem;
     --width-card-m: 40rem;
     --width-card-l: 54rem;
     --width-content: 1080px;
 
     /*BreakEvent Point*/
     --desktop: 1312px; /* Desktop */
     --tablet: 992px; /* Tablet */
     --landscape: 768px; /* Landscape */
     --mobile: 480px; /* Mobile */
 }
 
 /* Overide Bricks Default 
 .brxe-section {
 }
 .brxe-container {
     width: 1312px;
     @media (max-width: 992px) {
         padding: 0 var(--clamp-s);
     }
 }
 
 button.bricks-button {
     border-radius: var(--btn-radius);
     gap: calc(var(--clamp-s)*.75);
 }
 
 /* Your Styles Below this link */


body{
    margin:0
}
h1, h2, h3, h4, h5{
    margin:0;
}
/** autocss correction **/
main p{
    margin:0;
}
article p{
    margin: 0 0 calc(var(--clamp-s)* 1.25);
}
img, picture {
    width: unset !important;
    height: auto;
    outline: none;
    vertical-align: middle;
}
.space-v-s:not(.ct-section) > * + * {
    margin-top: 0;
}

h1{
    color:var(--primary);
}
.brxe-section {
    padding: calc(var(--clamp-section)* 2) 0;
}
.brxe-section {
    align-items: center;
    display: flex
;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.brxe-container {
    width: 1200px;
    margin:0 auto;
}
.brxe-container {
    @media (max-width: 1024px) {
        padding: 0 var(--clamp-s);
    }
}

[class*=brxe-] {
    max-width: 100%;
}
ul.menu{
    padding:0;
}
ul.menu li{
    display: inline-block;
    padding:0 1em;
}
header{
    padding-top:1em;
    background: url(/assets/img/header-teal.png) no-repeat center bottom;
    height:272px;
    background-size:cover;
    margin-bottom:-200px;
}

a{
    text-decoration: none;
}
a.primary:hover, a:hover{
    color:var(--primary-off)
}
a.secondary:hover{
    color:var(--secondary-off)
}
.footer{
  padding:1em 0;
}
@media (max-width: 480px) {
    header .brxe-container div{
        height:80%;
    }
    .grid-2:not(.ct-section), .grid-3:not(.ct-section) {
        row-gap: 0;
    }
    .grid-2 div{
        justify-self: center;
        margin-left: unset;
    }
    header img.logo{
        width:auto;
        height:40px;
        
    }
    header ul.menu{
        margin-top:-0.5rem;
    }
}
.text-label{
    letter-spacing: 3px;
}
.post-grid{
    border-bottom:1px solid var(--grey-light);
}
.post-meta{
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
}
article.post-content{
    h2{
        font-size: var(--m);
        margin:1em 0 0.2em 0;
    }
    h3{
        font-size: var(--s);
        margin:1em 0 0.2em 0;
    }
    h4{
        font-size: var(--s);
    }

}
.tags a{
    padding: 8px;
    line-height:100%;
    border-radius: var(--xs);
    margin-right:0.8rem;
    text-transform: lowercase;
}
.tags a::before{
    content: "#";
}
.tags-wrap ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}