Как сделать адаптивный кружок в grid ячейке?

Нужно сделать такой переключатель, но проблема в том, что кружки не получаются, а если убрать центрирование, то всё равно нужно подгонять размер сетки, чтобы получались кружки

<div className="worksSection-main__bp__smalls__switcher">
    <div className="worksSection-main__bp__smalls__switcher__container">
        <button className="worksSection-main__bp__smalls__switcher__container__circle" />
        <button className="worksSection-main__bp__smalls__switcher__container__circle" />
        <button className="worksSection-main__bp__smalls__switcher__container__circle" />
    </div>
</div>

&__switcher
          grid-template-columns: 10fr 1.6fr 10fr
          grid-template-rows: 10fr 5fr 10fr
          display: grid
          &__container
            grid-column: 2/3
            grid-row: 2/3
            display: grid
            grid-auto-flow: column
            grid-column-gap: 10px
            justify-items: center
            align-items: center
            &__circle
              border-radius: 50%
              width: auto
              height: auto
              background-color: #506a85
              border: 0px
              outline: none

Codepen: https://codepen.io/anon/pen/JgorpP