#habitat-realizations .page-header{
  display: grid;
  grid-template-columns: 1fr;
}

#habitat-realizations .page-header>*{
  grid-area: 1/1
}

#habitat-realizations .page-header img{
  object-fit: cover;
  height: 410px;
  width: 100%;
}

#habitat-realizations .page-header h1{
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.1;
  padding: 20px;
}
.realizations-categories{

  overflow: hidden;
}

.swiper-realizations-categories {
  overflow: visible!important;
  max-width: 1340px;
  width: calc(100% - 40px);
  margin: 50px auto;
}

.realizations-category{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 32px;
  background: #F3F7FA;
  width: fit-content!important;
  flex: 0 0 auto;
  color: rgba(44, 50, 72, 0.50);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  border-radius: 100px;
  height: 48px;
  margin-right: 10px;
  white-space: nowrap;
}

.realizations-category.current{
  background: var(--gradient-pro);
  background-size: 200% 200%;
  transition: background-position 0.3s ease-in-out, color 0.1s ease-in-out;
  color: white;
}

.realizations-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: 8px;
  grid-gap: 8px;
  margin-bottom: 30px;
}

.realization-card a{
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 16px;
}

.realization-card a:focus{
  text-decoration: none;
}

.realization-card a>*{
  grid-area: 1/1;
  border-radius: 16px;
}

.realization-card__background{
  position: relative;
  aspect-ratio: 618 / 487;
}

img.realization-cover {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.realization-card__content{
  background: linear-gradient(180deg, rgba(44, 50, 72, 0.00) 64.96%, rgba(44, 50, 72, 0.70));
  color: white;
  padding: 10px 10px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  z-index: 1;
}

.realization-card .realization-card__discover{
  margin-top: 16px;
  display: flex;
  align-items: center;
}

.realization-card .realization-card__subtitle{
  position: relative;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-left: 5px;
}

.realization-card .realization-card__subtitle:after {
  content          : '';
  position         : absolute;
  width            : calc(100% + 15px);
  left             : -15px;
  height           : 1px;
  background-color : #13AD92;
  bottom           : -5px;
  transform-origin : left;
  transform        : scaleX(0);
  transition       : transform 0.25s ease-in, width .25s ease-in, left .25s ease-in;
}

.realization-card:hover .realization-card__subtitle:after {
  transform        : scaleX(1);
  width            : calc(100%);
  left             : 0;
  transition-delay : .35s;
}

.realization-card .realization-card__svg {
  transform : rotate(45deg);
  color: #13AD92;
}

.realization-card .realization-card__svg line {
  stroke-dasharray  : 9 0;
  stroke-dashoffset : 0;
  transition        : stroke-dashoffset .35s ease-out, stroke-dasharray .35s ease-out;
  transition-delay  : .35s;
}

.realization-card:hover .realization-card__svg line {
  stroke-dashoffset : 20;
  stroke-dasharray  : 18 25;
  transition-delay  : 0s;
}

.realization-card .realization-card__svg path {
  stroke-dasharray  : 15 15;
  stroke-dashoffset : -14;
  transition        : stroke-dasharray .25s ease-out;
  transition-delay  : .3s;
}

.realization-card:hover .realization-card__svg path {
  stroke-dasharray : 0 15;
  transition-delay : .1s;
}

.realizations-pagination{
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
}

.realizations-pagination__ul{
  display: flex;
  align-items: center;
}

.realizations-pagination__item {
  margin: 0 7px;
}

.realizations-pagination__link{
  border-radius: 100%;
  width: 55px;
  height: 55px;
  background: #F3F7FA;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #000;
  transition: 0.3s ease;
}

.realizations-pagination__link:hover{
  background: #dddedf;
}

.realizations-pagination__link:focus{
  text-decoration: none;
}

.realizations-pagination__item.disabled .realizations-pagination__link{
  background: transparent;
}

.realizations-pagination__item.current .realizations-pagination__link{
  background: var(--gradient-pro);
  background-size: 200% 200%;
  transition: background-position 0.3s ease-in-out, color 0.1s ease-in-out;
  color: white;
}