.puzzle-widget { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; background-color: #fff; border-radius: 4px; }

.puzzle-image { -ms-flex-negative: 0; flex-shrink: 0; display: block; max-width: 420px; margin: 0 auto; position: relative; }
    .puzzle-image img { display: block; height: auto; }
    .puzzle-image span { width: 36px; height: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #bc0808; position: absolute; left: 225px; bottom: 39px; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; }
    .puzzle-image:hover span { width: 73px; }

.puzzle-news { -webkit-box-flex: 9999; -ms-flex-positive: 9999; flex-grow: 9999; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.puzzle-news-item { width: 100%; padding: 10px 20px; border-bottom: 1px solid #e6ecf3; }

.puzzle-news-text { max-height: 48px; display: block; padding-top: 10px; overflow: hidden; }
    .puzzle-news-text span { display: block; margin-bottom: 5px; font-size: 18px; color: #ED1C24; font-family: var(--font-bold); }
    .puzzle-news-text i { display: block; font-size: 16px; line-height: 20px; color: #4e4e4e; }

.puzzle-slider { background-color: #fff; padding: 10px 0; position: relative; }
    .puzzle-slider .puzzle-widget { display: block; }
    .puzzle-slider .puzzle-news-item { width: 100%; padding: 5px; border-bottom: none; }
    .puzzle-slider .swiper-slide { background: none; }
    .puzzle-slider .swiper-button-prev, .puzzle-slider .swiper-button-next { display: none; }


    .puzzle-slider .puzzle-news-text span { font-size: 14px; line-height: 1.3; }

@media (min-width: 370px) {
    .puzzle-image span { width: 43px; height: 44px; left: 266px; bottom: 47px; }
    .puzzle-image:hover span { width: 87px; }
}

@media (min-width: 410px) {
    .puzzle-image span { width: 44px; height: 45px; left: 273px; bottom: 48px; }
    .puzzle-image:hover span { width: 89px; }
}

@media (min-width: 767px) {
    .puzzle-news-item { padding: 20px; }
    .puzzle-image span { width: 41px; height: 43px; left: 252px; bottom: 44px; }
    .puzzle-image:hover span { width: 82px; }

    .puzzle-slider { padding: 10px 55px; }
        .puzzle-slider .swiper-button-prev, .puzzle-slider .swiper-button-next { position: absolute; top: 50%; left: 0; margin-top: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 56px; background-color: #fff; border-radius: 4px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); cursor: pointer; }
        .puzzle-slider .swiper-button-next { left: auto; right: 0; }

        .puzzle-slider .puzzle-news-item { padding: 10px; }
        .puzzle-slider .puzzle-news-text span { font-size: 14px; }
}

@media (min-width: 992px) {
    .puzzle-image span { width: 36px; height: 37px; left: 222px; bottom: 39px; }
    .puzzle-image:hover span { width: 72px; }
}

@media (min-width: 1200px) {
    .puzzle-image span { width: 38px; height: 39px; left: 232px; bottom: 41px; }
    .puzzle-image:hover span { width: 76px; }
}

@media (min-width: 1440px) {
    .puzzle-image span { width: 44px; height: 46px; left: 273px; bottom: 48px; }
    .puzzle-image:hover span { width: 90px; }
}