.npl-body-container{
  display: flex;
  flex-direction: column;
  gap: 60px 0;
  margin: 0 0 90px 0;
}

.npl-project-glass-plate {
  padding: 90px 0 0px 13.2%;
  height: 245px;
  margin-bottom: 60px;
  overflow-x: clip;
  position: relative;
}

.npl-project-glass-plate h1 {
  font-size: clamp(var(--fourteen), 8vw, var(--sixtySix));
  font-style: italic;
  font-weight: var(--menuWeight);
  color: var(--8d);
  font-family: "libre baskerville";
}

.npl-blog-icons-right-left {
  position: absolute;
  bottom: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1300px) minmax(15px, 1fr) 240px;
  margin: 0 45px 0 11%;
  max-width: 1300px;
  justify-items: end;
  z-index: 1;
  cursor: pointer;
}

.npl-blog-icon-responsive-container-right-left {
  display: flex;
}

.npl-blog-icon-right,
.npl-blog-icon-left {
  margin-left: 5px;
  width: var(--xlButton);
  height: var(--xlButton);
  outline: none;
  border: none;
  pointer-events: auto;
  opacity: 1;
}

.npl-blog-icon-right:hover,
.npl-blog-icon-left:hover {
  opacity: 0.85;
}

.npl-blog-icon-right img,
.npl-blog-icon-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.npl-blog-section {
  display: grid;
  grid-template-columns: minmax(10px, 740px) 1fr 240px;
  max-width: 1300px;
  padding: 90px 0 30px 0;
  font-size: var(--eighteen);
  font-family: var(--libre);
  font-weight: var(--xl);
  height: 150px;
  color: var(--7b);
  margin-left: 13.2%;
  margin-right: 6%;
}

.npl-blog-section-category-headings {
  grid-column: 1;
}

.npl-blog-icon-all p {
  font-weight: var(--menuWeight);
}

.npl-blog-icon-all img {
  height: 20px;
  width: 20px;
  cursor: pointer;
}

.npl-blog-section-sort {
  grid-column: 3;
  width: 100%;
}

.npl-blog-section-sort-underline {
  border: none;
  padding: 5px;
  border-bottom: 1px solid var(--gray2);
  cursor: pointer;
}

.npl-blog-section-sort-underline p,
.npl-blog-list-contribute p a,
.npl-blog-update-year .npl-update-archive p {
  color: var(--71);
  font-weight: var(--menuWeight);
}

.npl-blog-section-sort p {
  font-style: italic;
}

.npl-blog-section {
  display: grid;
  grid-template-columns: minmax(10px, 880px) minmax(15px, 1fr) 240px;
  gap: 40px 0;
  padding: 60px 0 40px 0;
  font-size: 20px;
  font-family: var(--libre);
  line-height: var(--libreHeight);
  font-weight: var(--normalWeight);
  height: auto;
  max-width: 1160px;
  margin-left: 11%;
  margin-right: 6%;
}

.npl-exhibition-p-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.npl-exhibition-date {
  font-weight: var(--normalWeight);
  font-size: var(--fifteen);
}

.npl-project-short-desc {
  color: black;
  font-family: var(--libre);
  font-weight: var(--normalWeight);
  line-height: var(--libreHeight);
  font-style: italic;
  font-size: var(--twentyTwo);
  margin: 0 0 0 5%;
  max-width: 690px;
}

.npl-blog-section-category-headings {
  grid-column: 1;
  max-width: 690px;
  margin: 0 0 0 5%;
}

.npl-blog-section-category-box {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border: none;
  border-top: 1px solid var(--gray2);
  border-bottom: 1px solid var(--gray2);
}

.npl-blog-all-blogs {
  font-weight: var(--dblXl);
  font-family: var(--barlow);
  color: var(--7b);
  font-size: var(--eighteen);
}

.npl-blog-icon-all {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.npl-blog-icon-all img {
  height: 20px;
  width: 20px;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .npl-blog-section {
    grid-template-columns: 1fr !important;
    margin: 0 auto !important;
    width: 90%;
    max-width: 740px;
  }

  .npl-blog-section-category-headings {
    grid-column: 1;
  }

  .npl-blog-section-sort {
    grid-column: 1;
    grid-row: 2;
  }

  .npl-blog-icons-right-left {
    grid-template-columns: 44px;
    margin: 0 auto !important;
    height: fit-content;
    pointer-events: none;
    left: 0;
    right: 0;
    outline: none;
    border: none;
    z-index: 10;
    width: 90%;
    max-width: 740px !important;
    justify-content: end;
  }
}

@media screen and (max-width: 768px) {
  .npl-blog-icons-right-left {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -35%);
    position: absolute;
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    height: fit-content;
    padding: 0 10px;
    pointer-events: none;
    outline: none;
    border: none;
  }

  .npl-blog-icons-right-left {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -35%);
  }

  .npl-blog-icon-responsive-container-right-left {
    width: 100%;
    justify-content: space-between;
    grid-column: 1;
  }
}

.npl-exhibition-content-wrapper {
  display: grid;
  grid-template-columns: minmax(10px, 880px) minmax(15px, 1fr) 240px;
  max-width: 1160px;
  gap: 40px 0;
  margin: 0 15px 0px 11%;
}

.npl-read-dummy {
  position: absolute;
  bottom: -15px;
  right: 0;
  width: 35px;
  height: 25px;
  overflow: clip;
  opacity: 0;
  transform: translateY(120%);
}

.npl-blog-original {
  transform: translateY(110%);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.npl-show-original {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.npl-blog-dummy {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.npl-hide-dummy {
  transform: translateY(-110%);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.mySwiper2 .swiper-slide-active:hover .npl-read-dummy {
  transform: translateY(0px);
  opacity: 1;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.45s;
}

.npl-exhibition-content-container {
  padding: 22px;
  display: flex;
  gap: 30px;
  max-width: 880px;
  overflow-y: clip;
  background-color: var(--8d);
  border: 1px solid var(--8d);
  cursor: pointer;
  grid-column: 1;
}

.npl-exhibition-content-image {
  /* max-width: 25rem; */
  max-width: 470px;
  aspect-ratio: 3/2;
  overflow: clip;
}

.npl-exhibition-content-image-wrapper {
  width: 100%;
  height: 100%;
}

.npl-exhibition-content-image img {
  /* width: 100%; */
  width: 470px;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}

/* hover container effect */
.npl-exhibition-content-container:hover
  .npl-exhibition-content-image-wrapper
  img {
  transform: scale(1.05);
  transition: transform 0.5s ease-in-out;
}

.npl-exhibition-content-details {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.npl-exhibition-content-date {
  position: relative;
  /* bottom: -5px; */
  text-transform: uppercase;
  font-family: "barlow";
  width: 100%;
  color: black;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.npl-exhibition-line-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  position: absolute;
  bottom: -10px;
  overflow-y: clip;
}

.npl-exhibition-line-inside {
  background-color: var(--df);
  width: 0%;
  height: 1px;
}

.npl-exhibition-content-container:hover .npl-exhibition-line-inside {
  animation: insideLine 0.3s ease-in-out forwards;
  /* animation-delay: 0.4s; */
}

@keyframes insideLine {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.npl-exhibition-overflow {
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(500%);
  overflow-y: clip;
  text-align: right;
  right: 0;
  color: var(--df);
  /* width: 100%;
  max-width: 21%; */
}

.npl-exhibition-line-container span {
  width: 100%;
  font-size: var(--fifteen);
  font-family: var(--libre);
  font-style: italic;
  text-transform: lowercase;
}

.npl-exhibition-content-container:hover
  .npl-exhibition-line-container
  .npl-exhibition-overflow {
  animation: 0.3s spanTran ease-in-out forwards;
  animation-delay: 0.1s;
}

@keyframes spanTran {
  0% {
    transform: translateY(500%);
  }

  100% {
    transform: translateY(-2px);
  }
}

.npl-exhibition-overflow:hover .npl-exhibition-dummy {
  transform: translateY(-110%);
  transition: 0.3s ease-in-out;
}

.npl-exhibition-overflow:hover .npl-exhibition-original {
  transform: translateY(0);
  transition: 0.3s;
}

.npl-exhibition-dummy {
  transform: translateY(0);
  transition: 0.3s ease-in-out;
}

.npl-exhibition-original {
  position: absolute;
  transform: translateY(110%);
  transition: 0.3s ease-in-out;
}

.npl-exhibition-content-details-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  height: 100%;
  color: black;
}

.npl-exhibition-content-details-groupBy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 5px;
}

.npl-exhibition-content-details-container h2 {
  font-size: var(--thirty);
  font-family: var(--libre);
  font-weight: var(--xl);
  color: black;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-y: clip;
}

.npl-exhibition-content-details-container
  .npl-exhibition-content-details-topic {
  font-size: var(--eighteen);
  font-weight: var(--authorWeight);
  font-family: var(--barlow);
  text-transform: uppercase;
}

.npl-exhibition-content-details-description {
  font-size: var(--eighteen);
  font-weight: var(--normalWeight);
  font-family: var(--barlow);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: clip;
  -webkit-line-clamp: 4;
  line-height: var(--barlowHeight);
}

@media screen and (max-width: 500px) {
  @keyframes insideLine {
    0% {
      width: 0%;
    }
    100% {
      width: 50%;
    }
  }
}

/* load button */
.npl-exhibition-load {
  max-width: 1185px;
  margin: 0px 0px 0px 11%;
  display: grid;
  grid-template-columns: minmax(0, 880px) minmax(15px, 1fr) 240px;
}

.npl-exhibition-load-content {
  grid-column: 1;
  margin: 0 0 0 5%;
  opacity: 1;
  display: flex;
  justify-content: end;
  max-width: 690px;
}

.npl-exhibition-load button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.hiddenLoad {
  display: none !important;
}

.npl-exhibition-load-content p {
  font-size: var(--twentyFive);
  font-weight: var(--dblXl);
  font-family: var(--barlow);
  color: var(--gray2);
}

.npl-exhibition-load-content div {
  width: var(--medButton);
  height: var(--medButton);
}

.npl-exhibition-load-content:hover {
  opacity: 0.85;
}

.npl-exhibition-load-content div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1350px) and (min-width: 1251px) {
  .npl-swiper2-grid,
  .npl-blog-icons-right-left {
    max-width: 1160px;
    margin: 0 5px 0 7%;
  }

  .npl-exhibition-content-wrapper {
    max-width: 1160px;
    gap: 40px 0;
    margin: 0 7%;
  }

  .npl-blog-section,
  .npl-exhibition-load {
    margin-left: 8.2%;
    max-width: 1135px;
  }

  /* .npl-project-short-desc,
  .npl-blog-section-category-headings,
  .npl-exhibition-load-content {
    margin: 0 0 0 3%;
  } */
}

@media screen and (max-width: 1250px) and (min-width: 1025px) {
  .npl-blog-icons-right-left {
    max-width: 1160px;
    grid-template-columns: 1fr;
    width: 85%;
    margin: 0 auto !important;
    gap: 10px;
    bottom: 10px;
  }

  .npl-exhibition-content-wrapper,
  .npl-blog-section,
  .npl-exhibition-load {
    grid-template-columns: minmax(0, 880px);
  }
}

@media screen and (max-width: 1024px) {
  .npl-blog-section,
  .npl-exhibition-load {
    width: 90%;
    max-width: 740px;
    margin: 0 auto;
    grid-template-columns: 1fr;
  }

  .npl-project-short-desc,
  .npl-blog-section-category-headings,
  .npl-exhibition-load-content{
    margin: 0;
    max-width: 100%;
  }

  .npl-blog-icon-left {
    grid-column: 1;
  }

  .npl-blog-icon-right {
    grid-column: 3;
  }

  .npl-blog-date,
  .npl-blog-section-sort {
    display: none;
  }

  .npl-blog-section {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (min-width: 1921px) {
  .npl-exhibition-content-wrapper {
    max-width: 64%;
    width: 100%;
    margin: 0 auto !important;
  }

  .npl-blog-icons-right-left {
    display: grid;
    grid-template-columns: minmax(0, 880px) minmax(15px, 1fr) 240px;
    max-width: 64%;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    justify-content: end;
    align-items: end;
    height: fit-content;
  }

  .npl-blog-icon-responsive-container-right-left {
    grid-column: 2;
  }

  .npl-exhibition-glass-plate {
    height: 285px;
    padding: 90px 0 0px 0;
    margin: 0 auto 60px;
    width: 64%;
  }

  .npl-exhibition-load {
    max-width: 64%;
    margin: 0 auto ;
    width: 100%;
    }
}


/* dynamic display of load button */
.buttonBlock {
  display: block;
}

.buttonNone {
  display: none !important;
}
/* end of button in dynamic render */