.screens {
  position: relative;
  display: grid;
  align-items: center;
}
@media (min-width: 1200px) {
  .screens {
    column-gap: 20px;
  }
  .screens:not(:has(.swiper-button-lock)) {
    grid-template-columns: auto 1fr auto;
  }
}
@media (min-width: 1200px) {
  .screens_slider {
    column-gap: 20px;
    width: calc(100% + 40px);
    padding-inline: 20px;
    margin-inline: -20px;
    mask: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
}
@media (max-width: 1199.98px) {
  .screens_slider {
    width: calc(100% + var(--container-padding) * 2);
    padding-inline: var(--container-padding);
    margin-inline: calc(var(--container-padding) * -1);
  }
}
.screens_item {
  display: grid;
  row-gap: var(--margin-block);
  align-content: start;
  justify-items: center;
}
@media (min-width: 1200px) {
  .screens_item {
    width: 219px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .screens_item {
    width: 176px;
  }
}
@media (max-width: 739.98px) {
  .screens_item {
    width: 112px;
  }
}
.screens_pic {
  width: 100%;
}
.screens_btn {
  width: 52px;
  height: 52px;
  background: var(--yellow-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M16.67 9.17v1.66h-10l4.58 4.59-1.18 1.18-6.6-6.6 6.6-6.6 1.18 1.18-4.58 4.59h10Z'/%3E%3C/svg%3E") no-repeat center/20px;
  border-radius: 10px;
  transition: background-color 0.25s ease-in-out;
}
.screens_btn--next {
  transform: scale(-1);
}
.screens_btn:hover, .screens_btn:focus-visible {
  background-color: var(--yellow-300);
}
.screens_btn.swiper-button-lock {
  display: none;
}
@media (max-width: 1199.98px) {
  .screens_btn {
    display: none;
  }
}
.screens_scrollbar {
  height: 4px;
  margin-top: var(--margin-block);
  background-color: var(--slate-100);
  border-radius: 10px;
}
.screens_scrollbar .swiper-scrollbar-drag {
  background-color: var(--slate-300);
  border-radius: inherit;
}
@media (min-width: 1200px) {
  .screens_scrollbar {
    display: none;
  }
}