&__responsive_mode {
  display: flex;
  gap: 0.5rem;

  input[type='radio'] {
    display: none;
  }

  label {
    --size: 1.5rem;
    cursor: pointer;
    background-image: url("../images/icon-desktop.svg");
    background-repeat: no-repeat;
    background-size: calc(var(--size) - 0.15rem);
    background-position: center;
    font-size: 1px;
    color: rgba(0, 0, 0, 0);
    line-height: 1;
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: 0.25rem;

    &[for="responsive_mode__tablet"] {
      background-image: url("../images/icon-tablet.svg");
    }

    &[for="responsive_mode__mobile"] {
      background-image: url("../images/icon-mobile.svg");
    }
  }

  input[type='radio']:checked + label {
    background-color: #CBD5E0;
  }

}