/* === Magazine Slider Styles === */
.pl {  margin: 0 auto; }

.pl-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
     text-align: center; /* для центрирования текста внутри */
}


.mag-slider {
  position: relative;
  margin: 0px auto;
  padding: 0 40px;
  font-size: 0;
  line-height: 1;
}

.mag-track {
  position: relative;
  width: 100%;
  min-height: 400px;
  border-radius: 8px;
  overflow: hidden;
  transition: height 0.2s ease;
}

.mag-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(6px) scale(0.98) rotateY(0);
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  z-index: 1;
  cursor: w-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mag-slide.enter-right { transform: translateX(10px) scale(0.97) rotateY(-1.5deg); }
.mag-slide.enter-left  { transform: translateX(-10px) scale(0.97) rotateY(1.5deg); }
.mag-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1) rotateY(0);
  pointer-events: auto;
  z-index: 2;
}

.mag-slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.mag-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10;
  padding: 0;
}
.mag-arrow:hover:not(:disabled) { opacity: 1; transform: translateY(-50%) scale(1.05); }
.mag-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.mag-arrow svg { width: 40px;
    height: 44px;display: block; }
.mag-prev { left: 4px; }
.mag-next { right: 4px; }

/* Блок с текстом под слайдером */
.pl .in {    text-align: center;
    padding: 0px 0;
     margin-top: -80px;}
body .pl .pl-name{    margin: 0;}
body .pl .pl-name {
    text-align: center;
    display: block;
    position: relative;
    padding: 0px 0 0px;
    margin: 0;
    text-transform: uppercase;
}
.xf a {text-decoration: none;}
.xf a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .mag-slider { padding: 0 32px; }
  .mag-arrow { width: 32px; height: 32px; }
  .mag-arrow svg { width: 16px; height: 16px; }
  .pl-name { font-size: 20px; }
}