<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Модалка 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Покажите второе модальное окно и скройте его с помощью кнопки ниже.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Открыть второе модальное окно</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Модалка 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Скройте это модальное окно и покажите первое с помощью кнопки ниже.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Вернуться к первому</button>
</div>

Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение.

Для свойства aspect-ratio можно установить для соотношения сторон значение auto, где «замененные элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если указать одновременно значения auto и <ratio>, то предпочтение будет соотношению сторон, определяемому делением width на height, если только это не замещаемый элемент с внутренним соотношением сторон (в этом случае используется его собственное соотношение сторон).

Пример согласованности в сетке (grid)
Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:

<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..." />
</li>
<li class="sponsor">
<img src="..." alt="..." />
</li>
</ul>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;