.page {
  --background-gap: 396px;
  --background-image: url('./index/background-mobile.png');
  --bg-gradient-step1: 1404px;
  --bg-gradient-step2: 2808px;
  --bg-gradient-step3: 7276px;
  --content-width: 288px;

  --inner-padding-value: 24px;
  --inner-padding: 0 var(--inner-padding-value);

  --color-white: #fff;
  --color-gray1: #d6d7d8;
  --color-gray2: #b4b4b4;
  --color-gray3: #e5e5e5;
  --color-gray4: #262e33;
  --color-blue: #44b1fb;

  background-color: #1f2027;
  background-image: linear-gradient(
      180deg,
      #001b2d 0%,
      rgba(0, 0, 0, 0) 90%,
      rgba(26, 26, 26, 0.4) 100%
    ),
    var(--background-image),
    linear-gradient(
      180deg,
      #001b2d 0%,
      #5192bc var(--bg-gradient-step1),
      #337299 var(--bg-gradient-step2),
      #121212 var(--bg-gradient-step2),
      #1f2027 var(--bg-gradient-step3),
      #353546 100%
    );
  background-repeat: no-repeat;
  background-position: center top, center 2181px, center top;
  background-size: 320px 2954px, 320px 828px, 320px 100%;
  color: var(--color-gray2);

  font: 17px/24px 'Roboto', sans-serif;

  display: grid;
  grid-template-columns: var(--content-width);
  grid-template-rows: 32px max-content 64px max-content 64px max-content
    var(--background-gap) max-content 64px max-content 32px max-content;
  grid-template-areas: '.' 'header' '.' 'section-1' '.' 'section-2' '.' 'section-3' '.' 'section-4' '.' 'section-5' '.' 'footer';
  justify-content: center;

  @media (min-resolution: 2dppx) {
    --background-image: url('./index/background-mobile@2x.png');
  }

  @media (min-width: 768px) {
    --background-image: url('./index/background-tablet.png');
    --bg-gradient-step1: 725px;
    --bg-gradient-step2: 1450px;
    --bg-gradient-step3: 4128px;
    --content-width: 736px;

    background-position: center top, center 829px, center top;
    background-size: 768px 1634px, 768px 846px, 768px 100%;

    @media (min-resolution: 2dppx) {
      --background-image: url('./index/background-tablet@2x.png');
    }
  }

  @media (min-width: 1138px) {
    --background-image: url('./index/background.png');
    --background-gap: 528px;
    --bg-gradient-step1: 844px;
    --bg-gradient-step2: 1688px;
    --bg-gradient-step3: 3968px;
    --content-width: 1106px;

    background-position: center top, center 990px, center top;
    background-size: 1368px 1784px, 1368px 846px, 1368px 100%;

    @media (min-resolution: 2dppx) {
      --background-image: url('./index/background@2x.png');
    }
  }
}