.switch {
  width: 100%; }
  .switch__item input {
    opacity: 0;
    width: 0px;
    height: 0px;
    position: absolute;
    height: 100%;
    visibility: hidden;
    cursor: pointer; }
  .switch__item label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem; }
  .switch__item input:checked {
    cursor: default; }
  .switch__item input:checked ~ label .toggler {
    background: linear-gradient(90deg, #CF2C09 0%, #FF6F53 100%); }
    .switch__item input:checked ~ label .toggler:before {
      left: 1.3rem; }
      @media (max-width: 1023px) {
        .switch__item input:checked ~ label .toggler:before {
          left: 18px; } }
  .switch__item .toggler {
    background: linear-gradient(90deg, #D8D8D8 0%, #D8D8D8 100%);
    border-radius: 999px;
    width: 3rem;
    height: 2rem;
    display: block;
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    transition: all .3s ease; }
    @media (max-width: 1023px) {
      .switch__item .toggler {
        width: 38px;
        height: 24px; } }
    .switch__item .toggler:before {
      position: absolute;
      content: "";
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 50%;
      background-color: #ffffff;
      left: 0.3rem;
      top: calc(50% - 0.7rem);
      transition: all .3s ease; }
      @media (max-width: 1023px) {
        .switch__item .toggler:before {
          width: 16px;
          height: 16px;
          left: 4px;
          top: calc(50% - 8px); } }
  .switch__item .descr {
    display: block;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1.8rem;
    cursor: pointer; }
    @media (max-width: 1023px) {
      .switch__item .descr {
        font-size: 16px; } }