.banner {
  padding: 10% 5% 3%;
  text-align: center;
}

.banner h2 {
  color: black;
  font-size: 5rem;
  line-height: 4rem;
  font-family: "DINPro-Bold", sans-serif;
}

@media only screen and (max-width: 1100px) {
  .banner {
    padding: 15% 5% 10%;
  }

  .banner h2 {
    font-size: 4rem;
    line-height: 3rem;
  }
}

@media only screen and (max-width: 720px) {
  .banner {
    padding: 20% 0% 10%;
  }

  .banner h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
}

.banner .filters-group-wrap {
  padding: 50px 0 0;
}

.banner .filters-group-wrap button {
  border: none;
  background: transparent;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
  border-bottom: solid 2px transparent;
  line-height: 10px;
}

@media only screen and (max-width: 720px) {
  .banner .filters-group-wrap button {
    font-size: 12px;
  }
}

.banner .filters-group-wrap button:hover {
  border-bottom: solid 2px black;
}

.banner .filters-group-wrap span {
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.banner .filters-group-wrap .active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  background-color: #eb0086;
  height: 2px;
  opacity: 0.8;
}

.portifolio {
  min-height: 1200px;
}

.portifolio .mansory .grid {
  max-width: 100%;
}

.portifolio .mansory .m-sizer,
.portifolio .mansory .grid-item,
.portifolio .mansory .grid-sizer {
  width: 33.29%;
  float: left;
  background: white;
  overflow: hidden;
  display: block;
}

.portifolio .mansory .m-sizer a,
.portifolio .mansory .grid-item a,
.portifolio .mansory .grid-sizer a {
  background: black;
  height: 100%;
  width: 100%;
  display: block;
}

.portifolio .mansory .m-sizer a img,
.portifolio .mansory .grid-item a img,
.portifolio .mansory .grid-sizer a img {
  width: 100%;
}

.portifolio .mansory .m-sizer a .border-svg,
.portifolio .mansory .grid-item a .border-svg,
.portifolio .mansory .grid-sizer a .border-svg {
  transition: all 0.2s ease-in-out;
  position: absolute;
  z-index: 10;
  opacity: 0;
  transform: scale(1.05);
}

.portifolio .mansory .m-sizer a:hover .border-svg,
.portifolio .mansory .grid-item a:hover .border-svg,
.portifolio .mansory .grid-sizer a:hover .border-svg {
  opacity: 1;
  transform: scale(1);
}

@media only screen and (max-width: 720px) {
  .portifolio .mansory .m-sizer a:hover .border-svg,
  .portifolio .mansory .grid-item a:hover .border-svg,
  .portifolio .mansory .grid-sizer a:hover .border-svg {
    opacity: 0;
  }
}

.portifolio .mansory .m-sizer a:hover img,
.portifolio .mansory .grid-item a:hover img,
.portifolio .mansory .grid-sizer a:hover img {
  opacity: 0.5;
}

@media only screen and (max-width: 1100px) {
  .portifolio .mansory .m-sizer h2,
  .portifolio .mansory .grid-item h2,
  .portifolio .mansory .grid-sizer h2 {
    font-size: 4rem;
    line-height: 3rem;
  }
}

@media only screen and (max-width: 720px) {
  .portifolio .mansory .m-sizer,
  .portifolio .mansory .grid-item,
  .portifolio .mansory .grid-sizer {
    width: 100%;
    height: 80vw;
    overflow: initial !important;
  }

  .portifolio .mansory .m-sizer img,
  .portifolio .mansory .grid-item img,
  .portifolio .mansory .grid-sizer img {
    -o-object-fit: cover;
       object-fit: cover;
  }

  .portifolio .mansory .m-sizer .border-svg,
  .portifolio .mansory .grid-item .border-svg,
  .portifolio .mansory .grid-sizer .border-svg {
    display: none !important;
  }
}

.portifolio .mansory .grid-item--width2 {
  width: 66.6%;
}

.portifolio .mansory .grid-item--height2 {
  height: 66.6%;
}

@media only screen and (max-width: 720px) {
  .portifolio .mansory .grid-item--width2 {
    width: 100%;
  }

  .portifolio .mansory .grid-item--width2 img {
    -o-object-fit: cover !important;
       object-fit: cover !important;
    width: auto !important;
    max-width: auto !important;
    left: -50% !important;
  }

  .portifolio .mansory .grid-item--height2 {
    height: 100%;
  }
}