<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<main class="main">
  <section class="loudaakcon">
  <div class="slider">
  <div class="asepons_avenakuda">
  <!-- Item 1 -->
  <figure class="asadipisc_ngelopada slide">
  <div class="savenp_sumakcon">
  <a href="#"><img src="http://zornet.ru/_fr/56/1625717.jpg" alt="коды и скрипты" /></a>
  </div>
  <figcaption class="sumselopas_udaakcon">
  <p><time datetime="2019-12-25">Январь 12, 2019</time></p>
  <p><a href="#">1 переход</a></p>
  <h2><a href="#">Название самого интересного и популярного поста в блоге.</a></h2>
  </figcaption>
  </figure>
   
  <!-- Item 2 -->
  <figure class="asadipisc_ngelopada slide">
  <div class="savenp_sumakcon">
  <a href="#"><img src="http://zornet.ru/_fr/56/1903405.jpg" alt="" /></a>
  </div>
  <figcaption class="sumselopas_udaakcon">
  <p><time datetime="2019-12-24">Октябырь 24, 2020</time></p>
  <p><a href="#">2 переход</a></p>
  <h2><a href="#">Для любителей ретро-игровых приставок и домашних компьютерных.</a></h2>
  </figcaption>
  </figure>
   
  <!-- Item 3 -->
  <figure class="asadipisc_ngelopada slide">
  <div class="savenp_sumakcon">
  <a href="#"><img src="http://zornet.ru/_fr/56/1903405.jpg" alt="дизайн сайта" /></a>
  </div>
  <figcaption class="sumselopas_udaakcon">
  <p><time datetime="2019-12-23">Сентябырь 2010</time></p>
  <p><a href="#">3 переход</a></p>
  <h2><a href="#">Графические процессоры имеют решающее значение для игр.</a></h2>
  </figcaption>
  </figure>
  </div>
  </div>
  </section>
  </main>

@import url("https://fonts.googleapis.com/css?family=Oswald:300,400|Roboto:300&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

img {
  border-style: none;
  height: auto;
}

a img {
  border: none;
  outline: none;
}

figure {
  display: block;
  background-color: #fff;
  -ms-interpolation-mode: bicubic;
}

figure img {
  display: block;
  width: auto;
  max-width: 100%;
}

:root {
  --master-color: #5942ad;
  --master-color-partner-dark: #1d247d;
  --headings-color: #263358;
  --main-bg-color: #f5f3f3;
  --secondary1-bg-color: #f5eeee;
  --secondary2-bg-color: #f3edec;
  --main-txt-color: #353333;
  --secondary-txt-color: #6b6767;
  --sub-color: #a9a3a3;
}

body {
  font-family: 'Roboto', Tahoma, sans-serif;
  font-size: 125%;
  font-style: normal;
  font-weight: 300;
  line-height: 1.8em;
   
  color: var(--main-txt-color);
  background: var(--main-bg-color);
}

h1, h2 {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  line-height: 1.14em;
  color: var(--headings-color);
}

h1 {
  font-size: calc(22px + .8vw);
  margin: .5em 0 1em;
}

h2 {
  font-size: calc(22px + 2vw);
  margin-bottom: calc(1em + 1vw);
}

a {
  color: var(--master-color);
  text-decoration: none;
  border-bottom: 1px var(--master-color) solid;  
  background-color: transparent;
  outline: none;
}

a:hover {
  color: var(--master-color-partner-dark);
}

a:focus {
  color: var(--headings-color);
  background-color: var(--secondary2-bg-color);  
}

h1 a, h2 a {
  border: none;
  color: #1c294e;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
}

p {
  margin: calc(.5em + .5vw) 0;
}

/**
  * Page Layout
  */
html, body { height: 100%; }  
   
.main {
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px) minmax(1em, 1fr);  
}

.main > * {
  grid-column: 2 / 3;
}

.section {
  grid-column: 1 / 3;
   
  display: grid; /* subgrid */
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px);
   
  background-image: linear-gradient(to bottom, #fff 0%, #fff 30%, var(--secondary1-bg-color) 30%, var(--secondary1-bg-color) 100%);
  margin-bottom: 4em;
}

.slider {
  grid-column: 2 / 3;
}

.bx-wrapper {
  position: relative;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
   
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
}

.bx-viewport {
  z-index: 10;
  -webkit-transform: translatez(0);  
}

.slider {
  visibility: hidden;
}

.slider,
.slider__content,
.slider__item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide {
  margin: 0;
  background-color: transparent;
}

.slide__img-wrap {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

.slide__img-wrap a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.slide__img-wrap img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.slide__description {
  position: relative;
  padding: 1em 3em;
  margin: -8em 0 0 50%;
  background: #fff;
  color: var(--sub-color);
  font-weight: 300;
  font-style: normal;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.bx-controls {  
  position: absolute;
  top: 0;
  right: 50%;
  padding-top: 56.25%;
}

.bx-controls-direction {
  z-index: 11;
  position: relative;
}

.bx-prev,
.bx-next {
  display: inline-block;
  font-size: 1.8em;
  width: 1.5em;  
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  background: var(--master-color);  
  color: #fff;
  text-align: center;
}  

.bx-prev {
  border-right: 1px #fff solid;
}

.bx-controls a:hover,
.bx-con@import url("https://fonts.googleapis.com/css?family=Oswald:300,400|Roboto:300&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

img {
  border-style: none;
  height: auto;
}

a img {
  border: none;
  outline: none;
}

figure {
  display: block;
  background-color: #fff;
  -ms-interpolation-mode: bicubic;
}

figure img {
  display: block;
  width: auto;
  max-width: 100%;
}

:root {
  --master-color: #c19f63;
  --master-color-partner-dark: #7c591d;
   
  --headings-color: #263358;  
   
  --main-bg-color: #fff;
  --secondary1-bg-color: #f6f6f6;
  --secondary2-bg-color: #fff0ec;
   
  --main-txt-color: #333;
  --secondary-txt-color: #757575;
   
  --sub-color: #b4b4b4;
}  

body {
  font-family: 'Roboto', Tahoma, sans-serif;
  font-size: 125%;
  font-style: normal;
  font-weight: 300;
  line-height: 1.8em;
   
  color: var(--main-txt-color);
  background: var(--main-bg-color);
}

h1, h2 {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  line-height: 1.4em;
  color: var(--headings-color);
}

h1 {
  font-size: calc(22px + .8vw);
  margin: .5em 0 1em;
}

h2 {
  font-size: calc(16px + 2vw);
  margin-bottom: calc(1em + 1vw);
}

a {
  color: var(--master-color);
  text-decoration: none;
  border-bottom: 1px var(--master-color) solid;  
  background-color: transparent;
  outline: none;
}

a:hover {
  color: var(--master-color-partner-dark);
}

a:focus {
  color: var(--headings-color);
  background-color: var(--secondary2-bg-color);  
}

h1 a,
h2 a {
  border: none;
  color: var(--headings-color);
  background-color: transparent;
  outline: none;
}

p {
  margin: calc(.5em + .5vw) 0;
}

html, body { height: 100%; }  
   
.main {
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px) minmax(1em, 1fr);  
}

.main > * {
  grid-column: 2 / 3;
}

.loudaakcon {
  grid-column: 1 / 3;
   
  display: grid;  
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px);
   
  background-image: linear-gradient(to bottom, #fff 0%, #fff 30%, var(--secondary1-bg-color) 30%, var(--secondary1-bg-color) 100%);
  margin-bottom: 4em;
}

.slider {
  grid-column: 2 / 3;
}

.bx-wrapper {
  position: relative;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
   
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
}

.bx-viewport {
  z-index: 10;
  -webkit-transform: translatez(0);  
}

.slider {
  visibility: hidden;
}

.slider,
.asepons_avenakuda,
.asadipisc_ngelopada {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide {
  margin: 0;
  background-color: transparent;
}

.savenp_sumakcon {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

.savenp_sumakcon a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.savenp_sumakcon img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.sumselopas_udaakcon {
  position: relative;
  padding: 1em 3em;
  margin: -8em 0 0 50%;
  background: rgb(255, 255, 255);
  color: #827b7b;
  font-weight: 300;
  font-style: normal;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.bx-controls {  
  position: absolute;
  top: 0;
  right: 50%;
  padding-top: 56.25%;
}

.bx-controls-direction {
  z-index: 11;
  position: relative;
}

.bx-prev, .bx-next {
  display: inline-block;
  font-size: 1.8em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  background: #6463c1;
  color: #f1eded;
  text-align: center;
}  

.bx-prev {
  border-right: 1px #fff solid;
}

.bx-controls a:hover,
.bx-controls a:focus {
  outline: none;
  color: var(--headings-color);
  background-color: var(--secondary2-bg-color);
}

.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

.slider .pager {
  position: absolute;
  top: 0;
  right: 50%;
  padding-top: 57%;
  margin-right: 6em;
  z-index: 9;
   
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-align: center;
  color: var(--secondary-txt-color);
}

.pager .curr-item {
  font-size: 1.778em;
}

.pager .curr-item:after {
  content: '/';
  display: inline-block;
  font-size: .6em;
  margin: 0 .25em;
}

.bx-wrapper .bx-loading {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 2000;
}

.bx-wrapper .bx-loading:after {
  font-size: 2em;
  content: "\27F3";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
   
  -webkit-animation: fa-spin 2s infinite steps(8);  
  animation: fa-spin 2s infinite steps(8);
}

@media all and (max-width: 900px) {
  body {
  font-size: 112.5%;
  line-height: 1.6em;
  }

  .bx-wrapper {
  background-image: linear-gradient(to right, transparent 0%, transparent 4em, #fff 4em, #fff 100%);
  }  
   
  .sumselopas_udaakcon {
  padding: 1em 2em;
  margin: -2em 0 0 4em;
  }
   
  .bx-prev,
  .bx-next {
  display: block;
  }
   
  .bx-prev {
  border-right: none;
  border-bottom: 1px #fff solid;
  }
   
  .slider .bx-controls {
  margin-top: 0;
  right: calc(100% - 4em);
  }
   
  .slider .bx-controls .bx-controls-direction {
  margin-top: 0;
  }
   
  .slider .pager {
  right: calc(100% - 3.5em);
  margin: 6em 0 0 0;
  }
   
  .slider .pager .curr-item {
  display: block;
  border-bottom: 1px var(--secondary-txt-color) solid;
  padding-bottom: .25em;
  }
   
  .slider .pager .curr-item:after {
  display: none;
  }  
}

@media all and (max-width: 769px) {  
  .savenp_sumakcon { width: 99%; }  
}

@media all and (max-width: 769px) {  
  h2 {font-size: 18px;}  
}

$('.slider .asepons_avenakuda').bxSlider({
  mode: 'fade',
  nextText: '›',
  prevText: '‹',
  pager: false,
  touchEnabled: false,
  onSliderLoad: function() {
  $(this).parent('.bx-viewport').after('<div class="pager"><span class="curr-item">'+viewOfNumber(this.getCurrentSlide()+1)+'</span>'+viewOfNumber(this.getSlideCount())+'</div>');
   
  $(this).parents('.slider').css('visibility', 'visible');
  },
  onSlideAfter: function($slideElement, oldIndex, newIndex) {
  $(this).parent('.bx-viewport').next('.pager').find('.curr-item').text(viewOfNumber(newIndex+1));
  }
  });
   
  function viewOfNumber(n) {
  return (n < 10 ? "0" : "") + n;
  }