page-sections{
  display: flex;
  flex-direction: column;
  gap:24px;
  .section{
    display: flex;
    flex-direction: column;
  }
  h2{
    margin-bottom: 8px;
  }
  h4 {
    margin-bottom: -16px;
  }
  p+p{
    padding-top: 16px;
  }
  page-section:first-child{
    .menu .block .up{
        display: none;
    }
  }
  page-section:nth-last-child(2){
    .menu .block  .down{
      display: none;
    }
  }
}

html-section {
  ul{
    padding: 0;
    margin-bottom: 0;
    >li{
      list-style: none;
      line-height: 32px;
      text-indent: -32px;
      padding-left: 32px;
      &::before{
        display: inline-block;
        content: "";
        width: 16px;
        height: 2px;
        background-color: var(--prime);
        margin-bottom: 5px;
        margin-right: 16px;
      }
    }
    *+li{
      margin-top: 24px;
    }
  }
  ul+*{
    margin-bottom: 20px;
  }
}

add-section, publications-list{
    .add{
        position: relative;
        margin: 24px 0;

      .toggle{
        display: flex;
        align-items: center;
        justify-content: center;
        ico{
          cursor: pointer;
        }
        .two-lines{
          flex-grow: 1;
          height: 4px;
          border-top: 1px solid var(--second-dis);
          border-bottom: 1px solid var(--second-dis);
        }
        
        &.active{
          a{
            color: var(--prime-act);
          }
        }
      }
      .dropdown{
        left:calc( 50% - 125px );
        top:22px;
      }
    }
    
}

.menu {
  display: flex;
  .block {
    ico{
      height: 24px;
      cursor: pointer;
      svg{
        color: var(--second)
      };
      &:hover{
        svg{
          color: var(--second-act)
        };
      }
    }
    background: var(--light);
    border: 1px solid var(--second-dis);
    border-radius: 4px;
    padding: 8px 24px;
    display: flex;
    margin-bottom: 24px;
    gap: 24px
  }
}

cards-section{
  .cards-add{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--second-dis);
    border-bottom: 1px solid var(--second-dis);
    margin-bottom: 40px;
    ico{
      cursor: pointer;
      svg{
        color: var(--prime) !important;
      }
      &:hover{
        svg{
          color: var(--prime-act) !important;
        }
      }
    }
  }
}


cards-section-items{
    .items {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 24px;
        flex-wrap: wrap;
      
        cards-section-item {
          
          width: 252px;
          cards-item-persons{
            display: flex;
            flex-direction: column;
            gap: 16px;
            .image{
              width: 100%;
              height: 338px;
              border-radius: 12px;
              border: 1px solid var(--second-dis);
              background: url('../images/view-man.svg') var(--white) center / 65% no-repeat;
              overflow: hidden;
              img{
                object-fit: cover;
                width: 100%;
                height: 100%;
              }
            }
            .title{
              font-family: PT Sans Narrow;
              font-size: 24px;
              font-style: normal;
              font-weight: 700;
              line-height: 32px;
              letter-spacing: 0.24px;
              color: var(--second);
            }
            .subtitle{
              color: var(--dark);
            }
            .subtitle{
              color: var(--dark);
            }
            .email{
              color:var(--prime)
            }
            .details a{
              display: inline-flex;
              align-items: center;
            }

          }

          cards-item-partners{
            a{
              display: block;
              width: 100%;
              height: 252px;
              padding: 16px;
              border-radius: 12px;
              border: 1px solid var(--second-dis);
              background-color: var(--white);
              overflow: hidden;
              img{
                object-fit: contain;
                width: 100%;
                height: 100%;
                transition: transform 0.1s;
                &:hover{
                  transform: scale(1.05);
                }
              }
            }
          }
        }
    }
}

images-section{
  display: block;

  .mobile{
    display: none;
  }
  .desctop{
    display: flex;
  }
  .close{
    position: absolute;
    top:24px;
    right: 24px;
  }
  
  
  
  .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  
    img{  
      border-radius: 12px;
    }
  
    &.tiles{
      .item{
        margin-bottom: 16px;
        img{
          border: 1px solid var(--second-dis);
          max-height: 273px;
          max-width: 273px; 
        }
      }      
    }
  
    &.full-width{
      display: flex;
      flex-direction: column;
  
      .item{
        max-width: 100%;
        margin-bottom: 32px;
        img{
          max-width: 100%;
        }
      }      
    }
  
    .item {
      
      position: relative;
  
      img {
        cursor: pointer;
      }
  
      &:last-child {
        margin-bottom: 0;
      }
  
      &.full-width {
        display: flex;
        flex-direction: column;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
  

  .swiper-box{
    width: 100% !important;
    height: 75vw !important;
    max-height: 400px;
  }

  
  .fullscreen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    position: fixed;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: grey;
  
  }
  
  @media screen and (max-width: 700px){
    .carousel {
  
      .prev, .next {
        cursor: pointer;
        z-index: 1;
        position: absolute;
        &.prev{
          left: 36px;
          z-index: 2;
        }
        &.next{
          right: 36px;
        }
      }
      .center {
        width: 100%;
        .slide {
          width: calc( 100vw - 80px );
          height: calc( (100vw - 80px) * 0.75 );
  
          img {
  
          }
        }
      }
    }
  }
  @media screen and (max-width: 480px) {
    .desctop{
      display: none !important;
    }
    .mobile{
      display: flex !important;
    }
    .fullscreen {
  
     
      .content {
        position: fixed;
        display: flex;
        pointer-events: none;
        
        
        width:100vw;
        height:100vh;
        left: 0;
        right: 0;
      }
      .prev{
        z-index: 5;
        margin-right: -50px;
      }
      .next{
        z-index: 5;
        margin-left: -50px;
      }
    }
  }
}

publications-list{
  .add a, .publication-read-more{
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
  }
  
  .items {
    margin: 24px 0;
  }  
  
  publications-list-item {
    display: block;
    padding: 24px 0;
    border-top: 1px solid var(--second-dis);
    &:last-child{
      border-bottom: 1px solid var(--second-dis);
    }

    .not-published{
      opacity: 0.5;
    }
  
    .date{
      color: var(--second);
      margin-bottom: 16px;
    }
    
    
    .excerpt{
      margin-top: $p;
      font-family: PT Sans;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
    }
    .name{
      margin-bottom: 24px;
    }
  
    .publication-read-more{
      margin-top: 24px;
    }
  
    .content{
      margin-top: $p;
      display: flex;
      flex-direction: column;
      gap: $p;
    };
  
  }
  
}

publication-page {

  .date{
    color: var(--second);
    margin-bottom: 16px;
  }
  

  .name{
    margin-bottom: 24px;
  }

  .content{
    margin-top: $p;
    display: flex;
    flex-direction: column;
    gap: $p;
  };
  
  .publication-page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
  }

}

gellery{
  .poster{ 
    height: 468px;
    max-width: calc( 100vw - 80px);
    max-height: calc( (100vw - 80px ) * 0.7 );
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    >img{
      height: 100%;
      border: 1px solid var(--second-dis);
      background-color: var(--second-dis);
      border-radius: 12px;
    }
  }
  .posters{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;

    .item{
      width: 72px;
      height: 52px;
      border: 1px solid var(--prime);
      cursor: pointer;
      :hover{
        border-color:  var(--prime-act);
      }
      img{
        object-fit: cover;
        object-position: 50% 20%;
        width: 100%;
        height: 100%;
      }
    }
  }
  .gellery-fullscreen{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    top:0;
    left: 0;
    background-color: gray;
    swiper-gellery{
      width: 100%;
      height: 100%;
    }
  }

}



video-section{
  cursor: pointer;
  .video-box{
    max-width: 720px;
    height: 405px;
    max-height: 52vw;
    position: relative;
    z-index: 0;

    .poster{
      object-fit: cover;
      width: 100%;
      height: 100%;   
    }
    .icon{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    iframe{
      width: 100%;
      height: 100%;
      background-color: black;
    }
  }
  
}



.pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  button {
    background-color: transparent;
    min-width: 24px;
    height: 24px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 18px;
    border: 1px solid var(--second);
    text-align: center;
    padding: 1px 6px;
    color: var(--dark);
    &.active {
      border-color: var(--prime);
      color: var(--prime);
    }
    &.next {
      margin-right: 20px;
      border-color: transparent;
      font-family: PT Sans;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
    }
  }
  .dots {
    width: 24px;
    height: 24px;
    background: transparent url("~src/assets/images/icons/more_horiz_20dp.svg") no-repeat center;
  }
  .count {
    display: flex;
    justify-content: right;
    flex-grow: 1;
    color: var(--black);
    font-size: 16px;
  }
}


@media screen and (max-width: 767px) {
  .pagination {
    .next {
      display: none;
    }
    .count {
      display: none;
    }
  }
}