@import url("https://fonts.googleapis.com/css2?family=Mulish&display=swap");

body {
  font-family: Mulish, sans-serif;
  background: #bebebe;
}

.slider {
  display: grid;
  grid-template-columns: var(--persent, 50%) 1fr;
  width: 600px;
  margin: 50px auto;
}

.slide {
  grid-row: 1/2;
  object-fit: cover;
}

.before {
  grid-column: 1/2;
  object-position: left;
}

.after {
  grid-column: 2/3;
  object-position: right;
  filter: grayscale(1);
  z-index: -1; /*нужен только из-за filter*/
}

.range {
  grid-column: 1/-1;
  grid-row: 1/2;
  height: 100%;
  margin: 0;
  opacity: 0;
}

.button-line {
  grid-column: 1/2;
  grid-row: 1/2;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4px;
  transform: translateX(50%);
  background: deepskyblue;
  pointer-events: none;
}

.button-line::after {
  content: "❮ ❯";
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid deepskyblue;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 1;
  font-size: 20px;
  color: white;
  background: deepskyblue;
}

.range:active + .button-line::after {
  color: deepskyblue;
  background: white;
}

.range:focus-visible + .button-line::after {
  color: red;
  background: white;
}

img {
  /* на случай отвалившихся картинок*/
  width: 100%;
  height: 300px;
  background: #00d4ff;

  &::after {
    content: "Если нет картинок, включи VPN. Впрочем, и без них понятно что к чему";
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.8em;
  }
}

.slider-mega-btn {
  border: none;
  color: deepskyblue;
  background: none;

  &:hover {
    color: deeppink;
  }
}