.expo-main {

  width: 100%;

}

.main_section_exposition {

    margin-bottom: 50px;

}

.main_section_exposition img.aligncenter {

    display: block;

    margin: 0 auto;

}

.expo-categories {

  width: 100%;

  padding: 32px 6vw 80px;

}

.expo-category__description {
  width: 100%;
  /* max-width: 920px; */

  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
}

.expo-category__description p {
  margin: 0 0 1.2em;
}

.expo-category__description strong,
.expo-category__description b {
  font-weight: 600;
}

.expo-category__description em,
.expo-category__description i {
  font-style: italic;
}



.expo-categories__count {

  padding: 0 0 24px;

  margin-bottom: 24px;

  border-bottom: 1px solid currentColor;

  font-size: 13px;

  font-weight: 600;

  text-transform: uppercase;

}



.expo-category {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px 0;
  border-bottom: 1px solid currentColor;
}

.expo-category__intro {
  width: 100%;
  /* max-width: 920px; */
}

.expo-category__intro h2 {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 600;
  text-transform: uppercase;
  color: #4bbec4;
}

.expo-category__intro p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}

.expo-category__link {
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: underline;
}



.expo-category__slider {

  /* position: relative;

  flex: 1 1 auto;

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 16px; */

      /* width: 100%;
    display: flex;
    align-items: center;
    gap: 16px; */

  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}



.expo-swiper {

  width: 100%;

  padding-bottom: 26px;

  overflow: hidden;
}



.expo-image {

  /* display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden; */

  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;

  box-shadow:
    0 2px 10px rgba(0,0,0,.08),
    0 8px 24px rgba(0,0,0,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}



.expo-image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.expo-image-caption {
  margin-top: 10px;

  font-size: 12px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  /* opacity: .7; */
}

.expo-slider-nav {

  flex: 0 0 34px;

  width: 34px;

  height: 34px;

  border: 1px solid currentColor;

  border-radius: 50%;

  background: transparent;

  font-size: 24px;

  line-height: 1;

  cursor: pointer;

}



.swiper-pagination-bullet {

  width: 6px;

  height: 6px;

}



.expo-category__excerpt {

  margin: 0 0 12px;

  font-size: 14px;

  line-height: 1.5;

  font-weight: 400;

}



.expo-category__read, .expo-category__link {

    display: inline-block;

    padding: 6px 15px;

    border: 1px solid #000000;

    background: none;

    font-size: 12px;

    font-weight: 400;

    text-transform: uppercase;

    cursor: pointer;

    outline: none;

    transition: all .3s ease-in-out;

    color: #000000;

    text-decoration: none;

}

.expo-category__read:hover, .expo-category__link:hover {

    border-color: #252627;

    background-color: #252627;

    color: #ffffff;

}

.expo-category__link{

    margin-top: 15px;

}



.expo-modal {

  position: fixed;

  inset: 0;

  /* display: none; */

  display: flex;

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  transition: opacity .25s ease;

}



.expo-modal.is-open {

  display: flex;

  opacity: 1;

  pointer-events: auto;

}



.expo-modal__overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, .35);



  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



.expo-modal__panel {

  position: relative;

  z-index: 1;

  width: min(760px, calc(100% - 32px));

  max-height: calc(100vh - 64px);

  margin: auto;

  padding: 40px;

  overflow-y: auto;

  background: #fff;

  transform: translateY(20px);

  transition: transform .25s ease;

}



.expo-modal.is-open .expo-modal__panel {

  transform: translateY(0);

}



.expo-modal__close {

  display: inline-flex;

  margin-bottom: 32px;

  padding: 0;

  border: 0;

  background: none;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  text-decoration: underline;

  cursor: pointer;

}



.expo-modal__panel h2 {

  margin: 0 0 24px;

  font-size: 28px;

  line-height: 1.15;

  font-weight: 600;

  text-transform: uppercase;

}



.expo-modal__content {

  font-size: 16px;

  line-height: 1.7;

  font-weight: 400;

}



.expo-modal__content p {

  margin: 0 0 1em;

}



body.expo-modal-open {

  overflow: hidden;

}



.expo-swiper .swiper-pagination-bullet-active {

    background: #000000;

}

.expo-swiper .swiper-wrapper {

    padding: 25px 0;

}

.expo-image {

  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;



  box-shadow:

    0 2px 10px rgba(0,0,0,.08),

    0 8px 24px rgba(0,0,0,.06);



  transition:

    transform .25s ease,

    box-shadow .25s ease;

}

.expo-image:hover {

  transform: translateY(-2px);



  box-shadow:

    0 6px 18px rgba(0,0,0,.12),

    0 16px 40px rgba(0,0,0,.10);

}

.expo-image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;



  transition: transform .4s ease;

}

.expo-image:hover img {

  transform: scale(1.015);

}

@media (max-width: 768px) {

  .expo-categories {

    padding: 24px 16px 64px;

  }



  .expo-category {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 16px;

    padding: 28px 0;

  }



  .expo-category__intro {

    flex: none;

    width: 100%;

  }



  .expo-category__intro h2 {

    font-size: 18px;

  }



  .expo-category__slider {

    width: 100%;

    display: flex;

  }



  .expo-slider-nav {

    display: none;

  }



  .expo-swiper {

    overflow: visible;

  }

    .expo-modal__panel {

    width: 100%;

    height: 100%;

    max-height: none;

    padding: 28px 20px;

  }



  .expo-modal__panel h2 {

    font-size: 22px;

  }



  .expo-modal__content {

    font-size: 15px;

  }

}