@media screen and (min-width: 581px) and (max-width: 768px) {
  html {
    font-size: 1em;
  }
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.8em;
  }
  #header {
    width: 100%;
    z-index: 100;
  }
  #header .region-header img {
    width: 193px;
  }
  #header .region-header .site-name {
    font-size: 1.4em;
  }
  #header .region-menu-bar .menu--main {
    margin-top: 12px;
  }
  #header .region-menu-bar li a {
    font-size: 1em;
    padding: 10px 4px;
  }
  #header .region-menu-bar li ul.menu li a {
    padding: 5px 5px;
  }
  #header.nav-up #header-inner .region-header {
    margin: 3px 20px 0 0;
  }
  #header.nav-up #header-inner img {
    width: auto;
  }
  #header.nav-up #header-inner .region-menu-bar .menu--main {
    padding: 10px;
  }
  #header.nav-up #header-inner .region-menu-bar #block-socialicons {
    margin-top: 5px;
  }
  .block-system-main-block {
    padding: 0 10px;
  }
  .block-views-blockfrontpage-blocks-block-2 {
    padding: 50px 10px;
  }
  .main {
    padding: 10px;
  }
  .region-highlighted {
    display: block;
  }
  .region-highlighted .block-views {
    width: 100%;
    margin: 0;
    padding: 10px;
  }
  .region-highlighted .block-views h3 {
    font-size: 1.5em;
  }
  .region-highlighted .block-views:nth-child(1) {
    margin-right: 0;
    width: 100%;
  }
  .region-highlighted .block-views:nth-child(2) {
    margin-left: 0;
    width: 100%;
  }
  .region-highlighted .block-views:nth-child(2) .view-content {
    padding: 0;
  }
  .region-highlighted .block-views .view-content {
    padding: 0;
  }
  .region-similar {
    padding: 10px;
  }
  footer .region-footer {
    display: flex;
  }
  footer .region-footer .block {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .block-page-title-block,
  .view-gallery,
  .block-contact-block,
  #maker .region-maker {
    padding-left: 10px;
    padding-right: 10px;
  }
  .padding-100 {
    padding: 30px 10px;
  }
  .path-frontpage .article-left h1 {
    margin-top: 0;
  }
  .masonry {
    max-width: 1900px;
    margin: 0 auto;
  }
  .masonry .item {
    width: 49.1%;
  }
  .threeinarow .view-content,
  .threeinarow .region {
    display: block;
  }
  .threeinarow .view-content .views-row,
  .threeinarow .region .views-row,
  .threeinarow .view-content .block,
  .threeinarow .region .block {
    width: 100%;
  }
  .threeinarow .view-content .views-row:nth-child(1),
  .threeinarow .region .views-row:nth-child(1),
  .threeinarow .view-content .block:nth-child(1),
  .threeinarow .region .block:nth-child(1),
  .threeinarow .view-content .views-row:nth-child(2),
  .threeinarow .region .views-row:nth-child(2),
  .threeinarow .view-content .block:nth-child(2),
  .threeinarow .region .block:nth-child(2) {
    padding: 0;
  }
  .fourinarow .view-content .views-row {
    width: 47%;
  }
  .fourinarow .view-content .views-row img {
    width: 100%;
    height: auto;
  }
  .sixinarow .view-content {
    padding: 0 10px;
  }
  .sixinarow .view-content .views-row {
    width: 20%;
  }
  .sixinarow .view-content .views-row img {
    width: 100%;
    height: auto;
  }
  .flex-2.flex-gap-10 .region .v-row,
  .flex-2.flex-gap-10 .v-content .v-row {
    flex: 0 0 calc((100% / (2 - 2)) - ((2 - 3) * 10px / (2 - 2)));
  }
  .flex-3.flex-gap-10 .region .v-row,
  .flex-3.flex-gap-10 .v-content .v-row {
    flex: 0 0 calc((100% / (3 - 2)) - ((3 - 3) * 10px / (3 - 2)));
  }
  .flex-4.flex-gap-10 .region .v-row,
  .flex-4.flex-gap-10 .v-content .v-row {
    flex: 0 0 calc((100% / (4 - 2)) - ((4 - 3) * 10px / (4 - 2)));
  }
  .flex-5.flex-gap-10 .region .v-row,
  .flex-5.flex-gap-10 .v-content .v-row {
    flex: 0 0 calc((100% / (5 - 2)) - ((5 - 3) * 10px / (5 - 2)));
  }
  .flex-6.flex-gap-10 .region .v-row,
  .flex-6.flex-gap-10 .v-content .v-row {
    flex: 0 0 calc((100% / (6 - 2)) - ((6 - 3) * 10px / (6 - 2)));
  }
  .flex-7.flex-gap-10 .region .v-row,
  .flex-7.flex-gap-10 .v-content .v-row {
    flex: 0 0 calc((100% / (7 - 2)) - ((7 - 3) * 10px / (7 - 2)));
  }
  .flex-2.flex-gap-20 .region .v-row,
  .flex-2.flex-gap-20 .v-content .v-row {
    flex: 0 0 calc((100% / (2 - 2)) - ((2 - 3) * 20px / (2 - 2)));
  }
  .flex-3.flex-gap-20 .region .v-row,
  .flex-3.flex-gap-20 .v-content .v-row {
    flex: 0 0 calc((100% / (3 - 2)) - ((3 - 3) * 20px / (3 - 2)));
  }
  .flex-4.flex-gap-20 .region .v-row,
  .flex-4.flex-gap-20 .v-content .v-row {
    flex: 0 0 calc((100% / (4 - 2)) - ((4 - 3) * 20px / (4 - 2)));
  }
  .flex-5.flex-gap-20 .region .v-row,
  .flex-5.flex-gap-20 .v-content .v-row {
    flex: 0 0 calc((100% / (5 - 2)) - ((5 - 3) * 20px / (5 - 2)));
  }
  .flex-6.flex-gap-20 .region .v-row,
  .flex-6.flex-gap-20 .v-content .v-row {
    flex: 0 0 calc((100% / (6 - 2)) - ((6 - 3) * 20px / (6 - 2)));
  }
  .flex-7.flex-gap-20 .region .v-row,
  .flex-7.flex-gap-20 .v-content .v-row {
    flex: 0 0 calc((100% / (7 - 2)) - ((7 - 3) * 20px / (7 - 2)));
  }
  .flex-2.flex-gap-30 .region .v-row,
  .flex-2.flex-gap-30 .v-content .v-row {
    flex: 0 0 calc((100% / (2 - 2)) - ((2 - 3) * 30px / (2 - 2)));
  }
  .flex-3.flex-gap-30 .region .v-row,
  .flex-3.flex-gap-30 .v-content .v-row {
    flex: 0 0 calc((100% / (3 - 2)) - ((3 - 3) * 30px / (3 - 2)));
  }
  .flex-4.flex-gap-30 .region .v-row,
  .flex-4.flex-gap-30 .v-content .v-row {
    flex: 0 0 calc((100% / (4 - 2)) - ((4 - 3) * 30px / (4 - 2)));
  }
  .flex-5.flex-gap-30 .region .v-row,
  .flex-5.flex-gap-30 .v-content .v-row {
    flex: 0 0 calc((100% / (5 - 2)) - ((5 - 3) * 30px / (5 - 2)));
  }
  .flex-6.flex-gap-30 .region .v-row,
  .flex-6.flex-gap-30 .v-content .v-row {
    flex: 0 0 calc((100% / (6 - 2)) - ((6 - 3) * 30px / (6 - 2)));
  }
  .flex-7.flex-gap-30 .region .v-row,
  .flex-7.flex-gap-30 .v-content .v-row {
    flex: 0 0 calc((100% / (7 - 2)) - ((7 - 3) * 30px / (7 - 2)));
  }
}