/* Adaptive Background Images for Mobile and Desktop */

/* Background blur */
#wrapper > .bg {
  filter: blur(3px);
  transform: scale(1.04);
}

/* Mobile devices (max-width: 736px) - Use mobile4.webp */
@media screen and (max-width: 736px) {
  #wrapper > .bg {
    background-image: url('../images/overlay.png'),
                      linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
                      url('../images/mobile4.webp?v=2') !important;
    background-size: cover;
    background-position: center top;
    /* iOS Safari не поддерживает background-attachment: fixed нормально */
    background-attachment: scroll;
  }
}

/* Tablet and larger (min-width: 737px) - Use desktop.webp (already set in main.scss) */
@media screen and (min-width: 737px) {
  #wrapper > .bg {
    background-image: url('../images/overlay.png'),
                      linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
                      url('../images/desktop.webp?v=2') !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
}

/* High DPI displays optimization */
@media
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
  #wrapper > .bg {
    background-size: cover;
  }
}