Как реализовать автоматическое изменение размеров одного элемента в зависимости от размеров другого?

Всем привет. У меня есть элемент-прямоугольник registration-overlay, который находится под двумя кнопками. Мне нужно, чтобы registration-overlay был "привязан к ним" и подстраивался под их размер. Например, если кнопки в ширину 100px, то он должен быть 110px и с высотой аналогично. Я пробовал реализовать вот таким образом в медиа-адаптации:

@media (orientation: portrait) and (min-width: 320px) and (max-width: 460px) {

  .Logo{
    position: relative;
    width: 7%;
    height: 7%;
    top: 4%;
    left: 12%;
    z-index: 2;
  }
  
  .Slogan{
    color: white;
    top: -7%;
    left: 24%;
    font-size: 5vw;
    width: 80%;
    word-wrap: break-word;
  }



  .login-buttons {
    top: 50%;
    left: 16%;
    height: 25%;
    width: 65%;
    font-size: 2.5vh;
    margin-bottom: 9%;
  }

  .login-button {
    width: 80%;
    height: 30%;
    border-radius: 11px;
  }

  .register-button {
    width: 80%;
    height: 30%;
    border-radius: 11px;
  }

  .registration-overlay {
    width: calc(55% + 30px); 
    height: calc(22% + 27px);
    top: calc(61% - 8px);
    left: calc(53% - 15px);
  }
}

однако столкнулся с проблемой, что при изменении ширины в DevTools с 320 до 370, registration-overlay становится непропорциональным, что не удивительно. Я хотел бы узнать, каким образом я могу реализовать изменение размера registration-overlay, в зависимости от размера кнопок, чтобы все было пропорционально с изменением размера экрана. Вот мой полный код:

.registration-form {
    position: relative; /* Относительное позиционирование для размещения форм над видео */
    height: 100vh; /* Минимальная высота контейнера, чтобы видео занимало весь экран */
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
    max-width: 1280px;
  }

  /* Стили для заднего фото */
  .image-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden; /* Предотвращаем прокручивание контейнера */
  }
  
  .image-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Чтобы изображение было центрировано */
  }
  
  /* Убрать отступы по умолчанию */
  body, html {
    margin: 0;
    padding: 0;
  }


.Logo{
  position: relative;
  height: 3%;
  width: 3%;
  top: 7%;
  left: -7%;
  z-index: 2;
}

.Slogan{
  position: relative;
  color: white;
  top: 37%;
  left: 10%;
  font-size: 2vw;
}


/* Стили для контейнера с кнопками */
.login-buttons {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  top: 40%;
  left: 65%;
  z-index: 3;
  height: 50%;
  width: 20%; 
}

  
  /* Стили для кнопок */
  .login-button {
    background-color: #0080ff;
    color: #fff;
    width: 100%;
    height: 11.5%;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
  }

  .register-button {
    background-color: #681cff; /* Зеленый цвет */
    color: #fff; /* Белый цвет текста */
    width: 100%;
    height: 11.5%;
    font-size: 16px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
  }



  .registration-overlay {
    position: absolute;
    width: calc(21% + 26px);
    height: calc(17% + 23px);
    top: calc(47% - 0px);
    left: calc(76% - 14px);
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    border-radius: 25px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.7);
  }




@media (orientation: portrait) and (min-width: 320px) and (max-width: 460px) {

  .Logo{
    position: relative;
    width: 7%;
    height: 7%;
    top: 4%;
    left: 12%;
    z-index: 2;
  }
  
  .Slogan{
    color: white;
    top: -7%;
    left: 24%;
    font-size: 5vw;
    width: 80%;
    word-wrap: break-word;
  }



  .login-buttons {
    top: 50%;
    left: 16%;
    height: 25%;
    width: 65%;
    font-size: 2.5vh;
    margin-bottom: 9%;
  }

  .login-button {
    width: 80%;
    height: 30%;
    border-radius: 11px;
  }

  .register-button {
    width: 80%;
    height: 30%;
    border-radius: 11px;
  }

  .registration-overlay {
    width: calc(55% + 30px); 
    height: calc(22% + 27px);
    top: calc(61% - 8px);
    left: calc(53% - 15px);
  }
}

jsx:

const RegistrationForms = () => {
  const [showForm, setShowForm] = useState(false);
  const [WhichForm, setWhichForm] = useState(true);

  const toggleForm = (isLogin) => {
    setShowForm(true);
    setWhichForm(isLogin);
  };

  return (
    <div className="registration-form">


      <div className="Logo">
        <img src="/logo/LibertyWML.svg" alt="Логотип" />
      </div>

    <div className="Slogan">
      <p>Просто тестовая надпись</p>
    </div>



      {/* Вставка изображения на заднем фоне */}
      <div className="image-background">
        <img src="/img/Just.jpg" alt="Фон" />
      </div>

      <div className="registration-overlay"></div>




      {!showForm && (
        <div className="login-buttons">

          <button className="login-button" onClick={() => toggleForm(true)}>Войти</button>

          <button className="register-button" onClick={() => toggleForm(false)}>Зарегистрироваться</button>
        </div>
      )}