@use postcss-cssnext;

@media (min-width: 768px) {
    nav{
        z-index: 998;
    }
}

/*body{
    background-color: #031229!important;
}*/

/* helpers/align.css */

.align {
  align-items: center;
  display: flex;
  justify-content: center;
}

img{
  width: 100%;
}





/* layout/base.css */

html {
  height: 100%;
   overflow-x: hidden;
}

body {
  margin: 0;
  margin-top: 4v

}


/* modules/figure.css */

figure {
  margin: 0;
}

/* modules/image.css */

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* vendor/masonry.css */

:root {
  --masonryGutter: 9px;
}

.masonry {
  margin: calc(var(--masonryGutter) * -1);
}

.masonry__item {
  margin: calc(var(--masonryGutter) / 2);
  width: calc(100% / 1 - var(--masonryGutter));
}


@media (max-width: 767px){

  .grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 100rem;
  width: 90%;
  margin-top: 20px;
}

}

@media (min-width: 450px) and (max-width: 849px){

  .masonry__item {
    width: calc(100% / 2 - var(--masonryGutter));
  }


}

@media (min-width: 850px) {

  .masonry__item {
    width: calc(100% / 3 - var(--masonryGutter));
  }

}

@media (min-width: 992px) {

  .masonry__item {
    width: calc(100% / 3 - var(--masonryGutter));
  }

}
/*/////////*/

.extra-margin-portolio-footer{
  margin-top: 50px;
}