* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.text-center {
    text-align: center !important;
}

.ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.col, .col-2, .col-10, .col-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-2, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-12, .col-sm-6 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>.col, .no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 992px) {
    .col-lg-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Base */
/*
a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a:hover {
    text-decoration: none; }
*/

.site-section {
  padding: 0 0 3em 0; 
}

/* Blocks */

.section-heading h2 {
  color: #000 !important;
  position: relative;
  display: inline-block;
  font-size: 40px; }
  .section-heading h2:before, .section-heading h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #000;
    left: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .section-heading h2:before {
    width: 100px;
    bottom: -10px;
    left: 50%; }

.section-heading.text-left h2:before, .section-heading.text-left h2:after {
  left: 0;
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%); }

.img-opacity img {
  -webkit-transition: .2s all ease;
  -o-transition: .2s all ease;
  transition: .2s all ease;
  opacity: 1; }

.img-opacity:hover {
  cursor: pointer; }
  .no-gutters:not(.title-fix) .img-opacity:hover img {
    opacity: .5; }


/* description and title */

.guide-item {
  position: relative;
  overflow: hidden;
}

.no-gutters:not(.title-fix) .guide-title-and-description {
  position: absolute;
  top: 0;
  right: -100%; /* Спрятано за правым краем */
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный белый фон */
  color: #000;
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.4s ease-in-out;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

.pointer-event .guide-title-and-description {
  pointer-events: none;
}

.no-gutters:not(.title-fix) .guide-item:hover .guide-title-and-description {
  right: 0; /* Выезжает внутрь карточки */
}


.no-gutters:not(.title-fix) .img-opacity img {
  transition: opacity 0.4s ease-in-out;
}

.no-gutters:not(.title-fix) .guide-item:hover .img-opacity img {
  opacity: 0.3;
}

.guide-title-and-description .read-more-link {
  margin-top: 1em;
}

.guide-item {
  position: relative;
  overflow: hidden;
}

.guide-title-and-description .read-more-link {
  color: #000 !important;
}

.guide-title-and-description h3 {
  font-size: 20px;
  line-height: 20px;
}

.guide-title-and-description h2 {
  font-size: 32px;
  line-height: 32px;
}

.title-fix .guide-item {
  position: relative;
  overflow: hidden;
}

/* Обёртка снизу изображения */
.title-fix .guide-title-and-description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 7px 15px 10px 15px;
  box-sizing: border-box;
  transition: max-height 0.4s ease, padding 0.4s ease;
  max-height: 2.5em; /* высота только заголовка */
  overflow: hidden;
  z-index: 2;
}

.final .guide-title-and-description {
  bottom: 5px;
  left: 5px;
  right: 5px;
  width: auto;
}

.final h3 {
  font-size: 22px !important;
  line-height: 24px !important;
}

.final h3 span {
  font-size: 14px !important;
  line-height: 24px !important;
}


/* Заголовок — всегда виден */
.title-fix .guide-title {
  margin: 0;
  font-size: 1.2rem;
}

/* Описание — спрятано по умолчанию, но занимает место внутри .guide-title-and-description */
.title-fix .guide-description {
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* При наведении увеличиваем высоту обёртки и показываем описание */
.title-fix .guide-item:hover .guide-title-and-description {
  max-height: 200px; /* можно настроить под максимальную высоту */
  padding: 15px;
}

.title-fix .guide-item:hover .guide-description {
  opacity: 1;
}


.guide-title .icon-right {
  position: absolute;
  right: 7px;
}

.title-fix .guide-item:hover .guide-title .icon-right {
  display: none;
}

/* body */

@media screen and (min-width: 1216px) {
    .bundle-listing_page .field-view.body,
    .bundle-listing_page #block-customtheme-page-title {
        max-width: 1152px;
    }
}

.bundle-listing_page .field-view.body,
.bundle-listing_page #block-customtheme-page-title {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 1em;
    padding-bottom: 2em;
}