/* Fonts and Variabls */

@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-Light.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-LightItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-regular.otf') format('opentype');
    font-weight: normal;
}
@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-Bold.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: 'FraktionMono';
    src: url('../Assets/Fonts/PPFraktionMono-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'FraktionMono';
    src: url('../Assets/Fonts/PPFraktionMono-Bold.ttf') format('truetype');
    font-weight: bold;
}

:root{
  font-size: 16px;
  --SafeHomes: #ff0000;
  --SafeCommunity: #00ff00;
  --SafeEnvironment: #0000ff;

  --width-max:1200px;
  --margin-body-sides:2rem;

  --FontSize-Reg: clamp(0.875rem, 1.5vw, 1rem);
  --FontSize-Med: clamp(1rem, 1.8vw, 1.25rem);
  --FontSize-Lrg: clamp(1.125rem, 2.1vw, 1.5rem);
  --FontSize-XL: clamp(1.5rem, 2.5vw, 2rem);
  --FontSize-XXL: clamp(2.25rem, 3.5vw, 3rem);
  --FontSize-Dspl: clamp(2.625rem, 4vw, 3.5rem);

  --Spc-Mini:0.5rem;
  --Spc-Small:1rem;
  --Spc-Medium:2rem;
  --Spc-Large:3rem;

  --ArrowRight:polygon(0% 0%, 100% 50%, 0% 100%);
  --ArrowLeft:polygon(0% 50%, 100% 0%, 100% 100%);
  --ArrowUp:polygon(50% 0%, 100% 100%, 0% 100%);
  --ArrowDown:polygon(0% 0%, 100% 0%, 50% 100%);

  --BorderHeavy:3px;
  --BorderMedium:2px;
  --BorderLight:1px;

  --OffWhite:#F4F4F4;

  --Accent100:#255579;
  --Accent050:#163247;
    --Accent025:#0D1E2B;
}

[data-pillar="Safe Workplaces"],
[value="Safe Workplaces"]{
    --Accent100:#E94F37;
    --Accent050:#BF412D;
    --Accent025:#8F3022;
    --heroImage:url('../Assets/Images/pexels-fung0818-18568174.jpg')
}
[data-pillar="Safe Homes"],
[value="Safe Homes"]{
    --Accent100:#FF7F39;
    --Accent050:#DB5912;
    --Accent025:#BD4300;
    --heroImage:url('../Assets/Images/pexels-shehab-al-qadhi-472755071-20858565.jpg')
}
[data-pillar="Safe Communities"],
[value="Safe Communities"]{
    --Accent100:#30C73C;
    --Accent050:#29A833;
    --Accent025:#1B7022;
    --heroImage:url('../Assets/Images/pexels-brett-sayles-937485.jpg')
}
[data-pillar="Safe Schools and Childcare"],
[value="Safe Schools and Childcare"]{
    --Accent100:#329AFB;
    --Accent050:#1875CC;
    --Accent025:#0057A8;
    --heroImage:url('../Assets/Images/pexels-oliver-hung-265548590-30281236.jpg')
}




/* Global Settings */

h1, h2, h3, h4{
  line-height: 110%;
  margin:0px 0px 0.25em 0px;
  letter-spacing: 2%;

  &:first-child{
    margin-top: 0px;
  }
  &:last-child{
    margin-bottom: 0px;
  }

}
h1{
  font-size: var(--FontSize-XXL);
  &.Display{
    font-size: var(--FontSize-Dspl);
  }
}
h2{
  font-size: var(--FontSize-XL);
}
h3{
  font-size: var(--FontSize-Lrg);
}
h4{
  font-size: var(--FontSize-Med);
  font-weight: 500;
}
p, a{
  font-size: var(--FontSize-Reg);
  letter-spacing: 2%;
  max-width: 600px;
  &.Display,
  .Display>&{
    font-size: var(--FontSize-Med);

    &>strong{
      font-size: 1.25em;
      font-weight: 600;
      color:var(--Accent100)
    }
  }

  margin:0.1em 0;

  &:first-child{
    margin-top: 0px;
  }
  &:last-child{
    margin-bottom: 0px;
  }

}
a{
  color:var(--Accent025);
  text-decoration:none;
}
a.btn{
  font-size: 1rem;
  font-weight: 700;
  background-color: var(--Accent100);
  color:#ffffff;
  padding: 0.5rem;
  display: inline-block;
}

body{
  font-family:StabilGrotesk;
  font-weight: 100;
  background-color: var(--OffWhite);
  margin: 0;
  padding:0 var(--margin-body-sides);
}

ul.gridList{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding:0px;
  gap:2rem;

  & li{
    margin:0px;
    list-style-position: inside;   
    list-style: none;
    margin:0;
  }
}

input{
  &.hiddenInput{
    display: none;
  }
}

main,
header,
footer{
    max-width:var(--width-max);
    margin:auto;
}

main>*{
  margin: 2rem auto;
}

footer{
    border-top:var(--BorderMedium) solid var(--Accent100);
    padding:1rem 0px;
    display:flex;
    justify-content:space-between;
}

header{
  background-color:var(--OffWhite);
  z-index:100;
  position:sticky;
  top:0px;

  &>.headerMain{
    display: grid;
    grid-template-columns: 1fr auto;

    &>.HeaderInfo{
      display: flex;
      align-items: center;
      color:var(--Accent100);
      font-size: var(--FontSize-Reg);
      & img.Logo{
        height: 1em;

        &.Logo-Mobile{
          display: none;
        }
      }

      & h1.site-title{
        font-size: 1.2em;
        display:inline-block;
        padding-left: var(--Spc-Mini);
        border-left: 1px solid currentColor;
        font-weight: bold;
        margin:0px;
      }
    }


    &>.navbar{

      display:flex;
      flex-wrap: nowrap;
      gap:var(--Spc-Small);
      align-items:stretch;

      &>a{
        text-decoration: none;
        display: block;
        margin:0;
      }

      &>.navItems{
        align-items: center;

        &>.navItem{
            position:relative;
            margin:0px 0.5rem;
            padding-left: 0.5rem;
            color:#000000;
            font-weight: 500;

            &::before{
              content:'';
              margin-right: 0.5rem;
              width:2px;
              position: absolute;
              left: 0px;
              top:0px;
              bottom: 0px;
              display:inline-block;
              background-color:var(--Accent100);
            }

            &.navItemActive{
              font-weight: 700;

              &::before{
                width:4px
              }
            }
          }
        }

        &>.navToggle{
          display: none;
        }
      

      &>.navBtn{
        font-weight: bold;
        padding: 0.75rem;
        color:#ffffff;
        background-color: var(--Accent100);
      }
    }
  }

  &>.PageTitle{
    & h1{
      margin: 0.5rem 0px;
    }
  }

  

  &::before{
    content: '';
    position: absolute;
    z-index: -1;
    background-color: var(--OffWhite);
    width: 100vw;
    top:0px;
    bottom:0px;
    left: 50%;
    transform: translate(-50%, 0%);
  }
}



fieldset{
  padding:0px;
  margin:0px;
  border:none;
}

.rule{

  &.rule-vertical{
    height: 100%;
    width: 2px;
    background-color:currentColor;
  }
}

/* Containers */

.Container{

    &.FlexContainer{
        display:flex;

        &.FlexRow{
            flex-direction:row;
        }

        &.FlexCol{
            flex-direction:column;
        }
    }

    &.GridContainer{
      display: grid;
    }

    &.ContainerGap-Mini{
      gap:0.5rem;
    }
    &.ContainerGap-Small{
      gap:1rem;
    }
    &.ContainerGap-Medium{
      gap:2rem
    }
    &.ContainerGap-Large{
      gap:3rem
    }

    &.ContainerPad-Small{
      padding: 1rem;
    }
    &.ContainerPad-Medium{
      padding: 2rem;
    }
    &.ContainerPad-Large{
      padding: 3rem;
    }

    &.BorderContainer{
        --borderWeight:var(--BorderMedium);
        --borderColor:var(--Accent100);
        border:var(--borderWeight) solid var(--Accent100);


        &.BorderLeft{
          border-width:0px 0px 0px var(--BorderMedium);
        }
        &.BorderTop{
          border-width:var(--BorderMedium) 0px 0px 0px;
        }
        
    }

    &.BorderContainer-Left-medium{
        border:var(--BorderMedium) solid var(--Accent100);
    }
}

/* Pills */
ul.pillBox,
ul.pillBox li{
  list-style-position:inside;
  margin:0px;
  list-style:none;
}

ul.pillBox{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding:0px;
  gap:0.5rem;
}

li.pill{
  display:block;
  padding:0.1rem 0.25rem;
  border:1px solid red;
  font-family:'FraktionMono';
  font-size:0.75rem;
  font-weight:600;
}

/* Database */
#DatabaseContentLayout{
    display:grid;
    grid-template-columns:300px 1fr;

}

/* Drilldown */

/* .DrillDownFilter .DrillDownFilterMenuSection,
.DrillDownFilter .DrillDownFilterNav{
  display: flex;
  flex-wrap: no-wrap;
} */

.DrillDownFilterNav{
  color:#ffffff;
  background-color:var(--Accent100);
  display:flex;
  flex-wrap:nowrap;

  :not(.ShowNav)>&{
    display: none;
  }
}
.DrillDownFilterMenuSection{
  display:grid;
  grid-template-columns:1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;

  &[data-level="1"]{
    gap:1rem;
  }

  &:not(.ActiveSection){
    display:none;
  }
}

.DrillDownFilter button{
  border-radius: 0px;
  background:none;
  border:none;
  text-align: left;
  display: block;

  padding: 1rem;


  .DrillDownFilterNav>&{
    color:#ffffff;
    flex-grow:0;

    &:last-child{
      flex-grow: 1;
    }

    &[data-level="2"]{
      background-color: var(--Accent100);
    }
    &[data-level="3"]{
      background-color: var(--Accent050);
    }
    &[data-level="4"]{
      background-color: var(--Accent025);
    }
  }


  .DrillDownFilterMenuSection>&{
    flex-grow:1
  }

  .DrillDownFilterMenuSection[data-level="1"]>&{
    background-color:var(--Accent100);
    text-align: center;
    color:#ffffff;
  }

  .DrillDownFilterMenuSection:not([data-level="1"])>&{
    border-left:var(--BorderMedium) solid var(--Accent100);
  }

}

.DrillDownFilterNav>button.DrillDownFilterResetBtn{
 background-color: var(--Accent025);
 position: relative;
 align-self: stretch;
}
.DrillDownFilterNav>button.DrillDownFilterResetBtn::before{
  content:'';
  display: block;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);

  width:0.5rem;
  aspect-ratio: 1/1;
  background-color: currentColor;
  clip-path:var(--ArrowLeft);

}

/* Check Nested */

.CheckGroup:has(>.CheckGroupHead input.visToggle:not(:checked)) > .CheckNested,
.CheckGroup:not(:has(>.CheckGroupHead>label>input.filterValue:checked)) > .CheckNested{
  display:none;
}

.CheckGroup{
  display:flex;
  display:webkit-flex;
  flex-direction:Column;
}

.CheckGroup>.CheckGroupHead{
  display:flex;
  flex-grow:1;
  align-items:stretch;

  &>label:has(>input.filterValue){
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap:var(--Spc-Mini);

    &::before{
      content:'';
      display:inline-block;
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      border:1px solid var(--Accent100)
    }
  }
  &>label:has(>input.filterValue:checked){
    &::before{
      background-color:var(--Accent050);
    }
  }




  .CheckGroupL1>&:not(:has(>label>input.filterValue:checked)){
    outline: 1px solid var(--Accent100)
  }
  .CheckGroupL1>&:has(>label>input.filterValue:checked){
    background-color:var(--Accent100);
    color:#FFFFFF;
  }


  .CheckGroupL2>&>label:has(input.filterValue){
    border-left: var(--BorderHeavy) solid var(--Accent100);
  }
  .CheckGroupL2>&:has(>label>input.filterValue:checked){
    /* background-color:var(--Accent025);
    color:#FFFFFF; */
  }

  .CheckGroupL3>&{
    border-left: var(--BorderLight) solid var(--Accent100);
  }


  &:not(:has(label>input.filterValue:checked))>.visToggleLabel{
    display: none;
  }
  &>.visToggleLabel{
    display: block;
    align-self: stretch;
    padding: var(--Spc-Mini);
    background-color: var(--Accent050);
    display: flex;
    align-items: center;
    justify-content: center;
    color:#ffffff;

    &::before{
      content:'';
      display: block;
      width:0.5rem;
      height:0.5rem;
      background-color:currentColor;
      clip-path:var(--ArrowRight);
      transform:rotate(0deg);
      transition:transform 0.25s;
    }
    &:has(input:checked)::before{
      transform:rotate(90deg);
    }

  }
}

/* Map */

/* Map Selector */
.mapContainer{
    flex-grow:1;
}

.mapSelect{
  border:none;
  display:grid;
  width:100%;
  grid-auto-flow: dense !important;
}

.stateBox{
  --ColorMain:#0000ff;
  --BorderWeight:1px;
  font-size:0.75rem;
  font-weight:600;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 1rem;
  grid-row-start:var(--RowStart);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  & > input{
    display:none;
  }

  &:has(>input:checked){
    color:#ffffff;
  }
  
  .mapContainer:has(>label>input:not(:checked))>.mapSelect>&{
    grid-row-start:auto !important;
    padding:0rem 1rem;
  }

  &::before{
    content:attr(data-abbreviation);
    display:block;
    position:relative;
    z-index:1;
  }

  &:hover::before,
  &:has(>input:checked){
    /* font-weight:1000; */
  }

  &::after{
   content:'';
    display:block;
    position:absolute;
    inset:2px;
    border:var(--BorderWeight) solid var(--ColorMain);
    z-index:0;
  }
  &:has(>input:checked)::after{
    background-color:var(--ColorMain)
  }
  &:hover::after{
    inset:5px;
  }
  
}

#map-title{

    & h2{
        margin:0;
    }
}

/* Map Content */
#CaseStudies{
}

#CaseStudies .CaseStudyItem{
  margin:1rem 0;
}

.CaseStudyItem .ContentArea{
  display: flex;
  flex-direction: column;
  gap:1rem;
}

#CaseStudies .CaseStudyItem .CaseStudyInfo,
#CaseStudies .CaseStudyItem .MoreInfo{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.CaseStudyItem .CaseStudyTitle{
  grid-column-start:1;
}
.CaseStudyItem .pillBox{
  grid-column-start:1;
  grid-row-start:2;
}
.CaseStudyItem .Taxonomy{
  grid-column:2;
  grid-row: span 2;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.CaseStudyItem .Sources{
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.CaseStudyItem .Taxonomy .TaxonomyItem,
.CaseStudyItem .Sources{
  border-left: var(--BorderMedium) solid var(--Accent100);
  padding: 0.5rem;
}





.ExpandRuleBox:has(>label>input:not(:checked)) .ContentArea > .MoreInfo{
  display:none !important;
}



/* Epanding Rule */
.ExpandRuleBox{
    display:flex;
    gap:0.5rem;

    &.RuleTop{
      flex-direction: column;

      &>label.FlagIn{
        width: 100%;
        border-top:var(--BorderMedium) solid var(--Accent100);
      }

      &>label{
        flex-direction: row;

        &>.RuleFlag{
          &::before{
            clip-path: var(--ArrowRight) !important;
          }
        }
      }

    }

    &.RuleLeft{
      &>label.FlagOut{
        border-Right:var(--BorderMedium) solid var(--Accent100);
      }
      &>label{
        flex-direction: column;

        &>.RuleFlag{
          flex-direction: column;
        }
      }
    }

    &>label{
      display: flex;
      justify-content: start;

      &:has(input:checked){
        justify-content: end;

        &>.RuleFlag::before{
          transform: rotate(180deg);
        }
      }

      &>.RuleFlag{
        background-color:var(--Accent100);
        display: block;
        padding: 0.25rem; 
        display: flex;
        gap:var(--Spc-Mini);
        flex-direction: row-reverse;
        align-items: center;
        color:#ffffff;

        &::before{
          content:'';
          display:inline-block;
          width: 0.5rem;
          height: 0.5rem;
          aspect-ratio: 1/1;
          background-color:currentColor;
          clip-path: var(--ArrowDown);
        }

        &[data-flagtext]::after{
          content: attr(data-flagtext);
          color:currentColor;
          display: inline-block;
          font-family: 'FraktionMono';
          font-weight: bold;
          font-size: 0.75rem;
          margin:0px;
          line-height: 100%;
          text-transform: uppercase;
          flex-shrink: 1;
        }
      }
    }

    &.RuleTop:not(:has(>label>input:checked)){
      max-width: 0px;
    }

    &.CollapseHidden:not(:has(>label>input:checked))>.ContentArea{
      display: none;
    }
}

/* Action Card */
.ActionCard{

  

  border-left: var(--BorderLight) solid var(--Accent100);

  &>p{
    padding: var(--Spc-Mini);
  }

  & .ActionExamples{
    font-family:'FraktionMono';
    border-top:var(--BorderLight) dotted var(--Accent100);
    padding:var(--Spc-Mini);
    font-size: 0.75rem;
    
  }

  &> .PolicyLeverFlag{
    display: inline-block;
    font-family: 'FraktionMono';
    font-size: 0.75rem;
    padding: var(--Spc-Mini);
    border: var(--BorderLight) solid var(--Accent100);
    border-left:none;
  }

}

/* Explore */
.ExploreElement{
  & input{
    display: none;
  }
}

.TaxonomySection{

  &.ExplorePillarHead{


    &>.TaxItems{
      display: grid;
      grid-template-columns: auto 1fr 1fr;
      grid-template-areas: "Btn Info Img";
      background-color: var(--Accent100);
      color:#ffffff;

      &>button{
        grid-area: Btn;
      }
      &>.Info{
        grid-area: Info;
        padding: 1rem;
      }
      &>.ImageBlock{
        grid-area: Img;
      }
    }
  }
  
  &[data-taxonomy="Recommendation"]>.TaxItems,
  &[data-taxonomy="Policy Type"]>.TaxItems{
    display: flex;
  }

  &[data-taxonomy="Recommendation"]>.TaxItems{
    background-color: var(--Accent025);
    color:#ffffff;
  }


  .TaxonomySection:not(:has(>.TaxItems label>input:checked))>&
  {
    display: none;
  }

}

.ExploreSectionToggle{
  background-color: var(--Accent050);
  border:none;
  flex-shrink: 0;
  position: relative;
  display: block;
  color:#ffffff;
  padding: 0.5rem;
  &:hover{
    background-color: var(--Accent025);
  }

  &::before{
    content:'';
    display: block;
    width: 0.5rem;
    aspect-ratio: 1/1;
    background-color: currentColor;
    clip-path: var(--ArrowUp);

  }

  .TaxItems:not(:has(label>input:checked))>&{
    display: none;
  }
}

.ExploreSectionContent{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.ExploreElement .TaxonomyItem:not(.ActionCard){
  padding: 1rem;
  border-left:var(--BorderHeavy) solid var(--Accent100);

  .ExploreSectionContent:has(.TaxonomyItem>input:checked)>&:not(:has(input:checked)){
  display: none;
  }

  &:not(:has(input:checked)) p{
    display: none;
  }

  &:has(input:checked){
    flex-grow:1;
  }
}



/* Agenda Page */

#Introduction{
  display: grid;
  grid-template-columns: 1fr 1fr;

  &>p{
    grid-column: span 2;
  }
}

.PillarGroup{
  display: grid;
  gap:2rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 2rem;

  & .PillarTitleCard{
    grid-column:span 2;
    margin-right: -1rem;
    margin-left: -1rem;
  }

  & .ReccsGroup{
    grid-column:span 2;
  }

  & .Description>p:not(:first-child){
    display: none;
  }
}

.PillarTitleCard{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--Accent100);
  color:#ffffff;

  & h2{
    font-size: 3rem;
    margin: 0.5em
  }
}

.ReccsList li{
  padding:0px 12px;
  border-left:var(--BorderHeavy) solid var(--Accent100);
}

.ImageBlock{
  display: block;
  height: 100%;
  background-color: var(--Accent100);
  background-image: var(--heroImage);
  background-blend-mode: luminosity;
  background-position: center;
  background-size: cover;
}

ul.signitoryList{
  padding: 0px;
  list-style: none;
  list-style-position: inside;

  /* display: flex;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap:0.5rem;
  
  &>li{
    list-style-position: inside;
    font-size: 0.75em;
    padding:0.5rem;
    font-weight: 500;
    background-color: #ffffff;
  }
}

.statBlock{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap:1rem;
  padding: 0.75rem 0;
  align-items: center;
  margin-bottom: 1.5rem;

  &>p{
    margin:0px;
    font-weight: 700;
  }

  &>.statNum{
    font-size: 2.5rem;
    text-align: right;
    white-space: nowrap;
    position: relative;

    &::before{
      content:'';
      position: absolute;
      aspect-ratio: 1/1;
      left: 100%;
      transform: translate(-50%, 0%);
      top:-10px;
      bottom: -10px;
      background-color:var(--Accent100);
      z-index:-1;
      opacity: 20%;
    }
  }

  &>.statTxt{
    font-size: 1.25rem;
  }
}

/* Screen Size 1300px */
@media screen and (max-width:1300px) {
  :root{
    --width-max:100%;
    --margin-body-sides:1rem;
  }

  header{
    padding-top: var(--Spc-Small);

    &>.headerMain{
      position: relative;

      & .HeaderInfo{

        & .Logo{
          &.Logo-Desktop{
            display: none;
          }
          &.Logo-Mobile{
            display: block !important;
          }
        }



      }

      & nav.navbar{

        gap:0;

        &>.navToggle{
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap:8px;
          padding:10px;
          aspect-ratio: 1/1;
          background-color: var(--Accent050);

          &::before,&::after{
            content:'';
            display: block;
            height: 2px;
            background-color: #ffffff;
          }


          &:has(input:checked){

            gap:0px;

            &::before{
              transform: rotate(45deg);
              margin-bottom: -1px;
            }
            &::after{
              transform: rotate(-45deg);
              margin-top: -1px;
            }
          }
        }
        
        &>.navItems{
          position: absolute;
          left: 0px;
          right: 0px;
          top:100%;
          background-color: var(--OffWhite);
          border-top:var(--BorderMedium) solid var(--Accent100);
          padding: var(--Spc-Small) 0px;
          flex-wrap: wrap;
          gap:10px 0px;
        }
        &:not(:has(input:checked))>.navItems{
          display: none;
        }

        &>a.navBtn{
          flex-grow: 1;
        }

      }

    }

    &>.PageTitle{
      header:has(.headerMain .navToggle>input:checked)>&{
        visibility: hidden;
      }
    }

  }

}

/* Screen Size 700px */
@media screen and (max-width:700px) {
  :root{
    --width-max:100%;
  }

  header{

    &>.headerMain{
      grid-template-columns: 1fr;
      gap:var(--Spc-Mini);

      &>.navbar{
        display: grid;
        grid-template-columns: auto 1fr;


        &>a.navBtn{
          padding: var(--Spc-Mini);
        }
      }

    }

    &>.PageTitle{
      &>h1{
        font-size: var(--FontSize-XL);
      }
    }

  }

  .ExploreElement{


    &>.TaxonomySection.ExplorePillarHead>.TaxItems{
      grid-template-columns: auto 1fr;
      grid-template-rows: 4rem auto;
      grid-template-areas:
        "Img Img"
        "Btn Info"
      ;

    }
    & .TaxonomySection[data-taxonomy="Recommendation"]>.TaxItems>.ExploreSectionContent,
    & .TaxonomySection[data-taxonomy="Policy Type"]>.TaxItems>.ExploreSectionContent{
      grid-template-columns: 1fr;
      grid-auto-flow: row;

      &>.TaxonomyItem{
        border-width: var(--BorderMedium) 0px 0px 0px;
        border-style: solid;
        border-color: var(--Accent100);
      }
    }
  }


  }