Анимированное растяжение градиентного фона, как это исправить? ⇐ CSS

[Anonymous]

Проблема в том, что если я растягиваю страницу/изменяю ее размер или использую другой браузер (я в основном работаю в Opera, в Chrome, например, он сломан), градиентный фон изменяется и растягивается, и он исчезает с моего изображения, и это некрасиво. Знаешь, как я могу это исправить? Я оставлю свой код ниже
Итак, я попытался создать эффект анимированной рамки для изображения на своей html-странице. Для этого я посмотрел несколько видеороликов на YouTube, объясняющих, как это сделать с помощью анимации, @property и так далее. Вот код, который я написал
.qr-container {
flex: 1;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
height: 100%;
padding: 20px;
aspect-ratio: auto;
inset: -3;
position: relative;
}

.qr-container::after,
.qr-container::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
border-radius: 12px;
background: conic-gradient(
from var(--angle),
#c1ffcc,
#718d80,
#5b7567,
#c1ffcc
);
z-index: -1;
opacity: 0;
transition: opacity 3s ease;
animation: 3.5s gradientBorderAnimation linear infinite;
animation-play-state: paused;
}

.qr-container::before {
filter: blur(1.5rem);
}

.qr-container.show::after,
.qr-container.show::before {
opacity: 1;
animation-play-state: running;
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... n-i-fix-it