.image-button { width: calc(10vw * var(--sizeButton)); height: calc(10vw * var(--sizeButton)); border: none; background-size: cover; border-radius: calc(0.3vw * var(--sizeButton)); } .image-button:hover { opacity: 0.8; } .image-button:active .overlay { transform: scale(0.95); } .image-button-margin { margin-top: calc(2vw * var(--sizeButton)); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком */ transition: background 0.5s ease; } :root { --sizeButton: 1; } @media screen and (max-width: 980px) { :root { --sizeButton: 2; } }