CSS радио кнопки

Question

Что ж, добрый день, я недавно запустил проект и подумал о том, чтобы у меня было два переключателя для набора параметров, а затем я хотел связать каждую из них с изображением, чтобы при нажатии кнопки изображение увеличивалось. , Но я еще не нашел способ сделать это. Пожалуйста, любые советы. И это также должно быть только CSS нет JavaScript.

Вот код:

  .services-container .row .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 15% 85%;
  grid-template-rows: 15% 85%;
  overflow: hidden;
}

.services-container .row .container .choice {
  position: relative;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 5px;
}

.services-container .row .container .choice .form-group {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.services-container .row .container .choice .form-group input[type="radio"] {
  display: none;
}

.services-container .row .container .choice .form-group input[type="radio"]:checked~label .radio-style::after {
  opacity: 1;
}

.services-container .row .container .choice .form-group label {
  position: relative;
  cursor: pointer;
  padding-left: 2.5rem;
}

.services-container .row .container .choice .form-group label .radio-style {
  position: absolute;
  top: -0.25rem;
  left: 0;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  border-radius: 50%;
  background: transparent;
  border: 4px solid #007be0;
}

.services-container .row .container .choice .form-group label .radio-style::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background-color: #007be0;
  opacity: 0;
  -webkit-transition: all 0.2 0.5s;
  -o-transition: all 0.2 0.5s;
  transition: all 0.2 0.5s;
}

.services-container .row .container .choice .service-img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.services-container .row .container .choice:first-child {
  border-right: 1px solid #007be0;

<div class="services-container">
  <div class="row">
    <div class="container">
      <div class="choice">
        <div class="form-group">
          <input type="radio" name="services" id="services-build">
          <label for="services-build" class="label-1">
                                <span class="radio-style"></span>
                                    Build
                            </label>
        </div>
      </div>
      <div class="choice">
        <div class="form-group">
          <input type="radio" name="services" id="services-buy">
          <label for="services-buy" class="label-2">
                            <span class="radio-style"></span>
                                Buy
                        </label>
        </div>
      </div>
      <div class="choice choice-img">
        <img src="img1" alt="Build" class="service-img">
      </div>
      <div class="choice choice-img">
        <img src="img2" alt="Buy" class="service-img">
      </div>
    </div>
  </div>
</div>