/* --------------FLEXBOX------------------ */
/* Use this stylesheet for layout styling. Edit as needed to match your own design. */

/* CORE FRAMEWORKS */






.sec-with-columns {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0 auto;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-around;
  flex-wrap: wrap;
}

.row.full-width {
  justify-content: flex-start;
}

.flex-item {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.flex-gap-sm {
  gap: 10px;
}
.flex-gap-md {
  gap: 20px;
}
.flex-gap-lg {
  gap: 40px;
}


/* ----Responsive layout - Media queries-------- */
/* You can edit the rules inside of these media queries, but you can also edit the breakpoints. */

@media (max-width: 600px) {
  /* anything you only want applied at mobile sizes can go here */
 .flex-item {
    width: calc(100vw - 4em);
    height: auto;
  }
    
}

@media (min-width: 768px) {
/* anything you want to kick in at small tablet and above can go here */

}

@media (min-width: 900px) {
/* anything you want to kick in at large tablet and above can go here */

.flex-item.one-third {
  width: 33.33%;
  flex-grow: unset;
}

.flex-item.two-thirds {
  flex-grow: unset;
  width: 66.67%;
}

  .flex-gap-sm .flex-item.one-third {
    width: calc(33.33% - 6.67px);
  }

  .flex-gap-sm .flex-item.two-thirds {
    width: calc(66.67% - 3.33px);
  }

  .flex-gap-md .flex-item.one-third {
    width: calc(33.33% - 13.34px);
  }

  .flex-gap-md .flex-item.two-thirds {
    width: calc(66.67% - 6.66px);
  }

  .flex-gap-lg .flex-item.one-third {
    width: calc(33.33% - 26.67px);
  }

  .flex-gap-lg .flex-item.two-thirds {
    width: calc(66.67% - 13.33px);
  }

  .flex-item.one-quarter {
    flex-grow: unset;
    width: 25%;
  }

  .flex-item.three-quarters {
    flex-grow: unset;
    width: 75%;
  }

  .flex-gap-sm .flex-item.one-quarter {
    width: calc(25% - 7.5px);
  }

  .flex-gap-sm .flex-item.three-quarters {
    width: calc(75% - 3.5px);
  }

  .flex-gap-md .flex-item.one-quarter {
    width: calc(25% - 15px);
  }

  .flex-gap-md .flex-item.three-quarters {
    width: calc(75% - 5px);
  }

  .flex-gap-lg .flex-item.one-quarter {
    width: calc(25% - 30px);
  }

  .flex-gap-lg .flex-item.three-quarters {
    width: calc(75% - 10px);
  }

  .flex-item.one-half {
    flex-grow: unset;
    width: 50%;
  }

  .flex-gap-sm .flex-item.one-half {
    width: calc(50% - 5px);
  }

  .flex-gap-md .flex-item.one-half {
    width: calc(50% - 10px);
  }

  .flex-gap-lg .flex-item.one-half {
    width: calc(50% - 20px);
  }

 }

 @media (min-width: 1300px) {
  /* anything you want to kick in at desktop and above can go here */
  .container {
    max-width: 1600px;
    /* this max-width is entirely optional, and can be edited to your fit your design. Check how your design will look on large screens by pressing CMMD- in your browser, and decide if and how you want to constrain the overall content width. */
  }
     
 }