* { box-sizing: border-box; }


/* ---- button-group ---- */

.button-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  gap: 15px;
  justify-content: center;
  margin-bottom: 40px;
}


.button-group .button {
  color: var(--contrast-2);
  border-radius: 40px;
  background-color: rgba(0,0,0,0.01);
  transition: all 0.2s;
  padding: 5px 20px;
  
}


/* ---- button ---- */


.button:hover {
  background-color: var(--accent-2);
  color: white;
}

.button:active,
.button.is-checked {
  background-color: var(--accent-2);
}

.button.is-checked {
  color: white;
}


/*.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }*/
/*.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }*/

/* ---- isotope ---- */

.mad-blog-container {
  /*border: 1px solid #333;*/
  
}

/* clear fix */
.mad-blog-container:after {
  /*content: '';*/
  /*display: block;*/
  /*clear: both;*/
}

/* ---- .element-item ---- */

.mad-blog-grid .mad-blog-item {
  position: relative;
  float: left;
  /*width: 100px;*/
  /*height: 100px;*/
  width: 31%;
  min-width: 300px;
  height: auto;
  margin-right: 2%;
  margin-bottom: 40px;
  padding: 0 0 20px 0;
  background: var(--accent-2-a);
  color: #262524;
}

/* 
.element-item > * {
  margin: 0;
  padding: 0;
} */