_header.scss

.header {
	padding: 18px 20px 0 19px;
  height: calc(812px - 38px);

  background:
    no-repeat left calc(79% - 73px) bottom -22px/100px url("header/knight.png"),
    url('header/texture.jpg'),
    no-repeat left 79% bottom -12px / 900px url("header/city.webp"),
    fixed no-repeat calc(79% - 37px) 410px/309px url("header/circle.png"),
    #e9ded4;
  background-blend-mode: normal, color-burn, normal, normal, normal;   
}

.header__content {
  max-width: 542px;
}

.header__logo {
	height: 32px;
  margin-bottom: 40px;
}

.header__heading {
	margin-bottom: 24px;
}

.header__tagline {
	font-size: 18px;
  line-height: 130%;
  margin-bottom: 32px;
}

.header__buttons {
  display: grid;
  grid-auto-rows: 47px;
  gap: 14px 16px;
}

@include breakpoint {

  .header {
    padding: 26px 0 0 72px;
    height: 700px;

    background:
      no-repeat calc(46% + 650px) 97% url("header/pawn.png"),
      no-repeat calc(46% + 294px) 111% url("header/knight.png"),
      url("header/texture.jpg"),
      no-repeat left 46% bottom -25px url("header/city-desktop.webp"),
      fixed no-repeat calc(46% + 347px) -5% url("header/circle.png"),
      #e9ded4;
    background-blend-mode: normal, normal, color-burn, normal, normal, normal;
  }

  .header__logo {
    height: 36px;
    margin-bottom: 62px;
  }

  .header__tagline {
    text-align: center;
    margin-bottom: 24px;
  }

  .header__buttons {
    grid-auto-flow: column;
    grid-auto-rows: 72px;
  }

}