.wp-block-cnb-imgslider {
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
}
.wp-block-cnb-imgslider figure {
  margin-right: 20px;
  margin-bottom: 20px;
  max-height: 300px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.wp-block-cnb-imgslider figure::before {
  content: url('img/open.svg');
  position: absolute;
  right: 15px;
  bottom: 15px;
  cursor: pointer;
}
.wp-block-cnb-imgslider figure:nth-child(1),
.wp-block-cnb-imgslider figure:nth-child(5n) {
  width: calc(55% - 20px);
}
.wp-block-cnb-imgslider figure:nth-child(2),
.wp-block-cnb-imgslider figure:nth-child(6n) {
  width: calc(45% - 20px);
}
.wp-block-cnb-imgslider figure:nth-child(3),
.wp-block-cnb-imgslider figure:nth-child(7n) {
  width: calc(45% - 20px);
}
.wp-block-cnb-imgslider figure:nth-child(4),
.wp-block-cnb-imgslider figure:nth-child(8n) {
  width: calc(55% - 20px);
}
.wp-block-cnb-imgslider figure img {
  height: 100%;
  width: auto;
  max-width: none;
}
.wp-block-cnb-imgslider .slider-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(34, 34, 38, 0.9);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.wp-block-cnb-imgslider .slider-bg .left-arrow {
  margin-left: 57px;
  width: 20px;
  margin-right: 37px;
  height: 40px;
  cursor: pointer;
}
.wp-block-cnb-imgslider .slider-bg .left-arrow::before {
  content: url('img/left-arrow.svg');
}
.wp-block-cnb-imgslider .slider-bg .slide-block {
  position: relative;
  max-height: calc(100vh - 200px);
  max-width: calc(100vw - 250px);
}
.wp-block-cnb-imgslider .slider-bg .slide-block .close {
  position: absolute;
  right: 0;
  top: -90px;
  width: 45px;
  height: 45px;
  cursor: pointer;
}
.wp-block-cnb-imgslider .slider-bg .slide-block .close::before {
  content: url('img/close.svg');
}
.wp-block-cnb-imgslider .slider-bg .right-arrow {
  margin-right: 57px;
  width: 20px;
  margin-left: 37px;
  height: 40px;
  cursor: pointer;
}
.wp-block-cnb-imgslider .slider-bg .right-arrow::before {
  content: url('img/right-arrow.svg');
}
@media screen and (max-width: 500px) {
  .wp-block-cnb-imgslider figure:nth-child(1),
  .wp-block-cnb-imgslider figure:nth-child(5n),
  .wp-block-cnb-imgslider figure:nth-child(2),
  .wp-block-cnb-imgslider figure:nth-child(6n),
  .wp-block-cnb-imgslider figure:nth-child(3),
  .wp-block-cnb-imgslider figure:nth-child(7n),
  .wp-block-cnb-imgslider figure:nth-child(4),
  .wp-block-cnb-imgslider figure:nth-child(8n) {
    width: 100%;
  }
}