.page {
  >header {
    background: #FFF;
    padding-block: 30px 56px;

    >div {
      align-items: center;
      display: grid;
      margin-inline: 16px;

      @media (min-width: 576px) {
        margin-inline: auto;
        max-width: 540px;
      }

      @media (min-width: 768px) {
        max-width: 720px
      }

      @media (min-width: 992px) {
        max-width: 960px;
      }

      @media (min-width: 1200px) {
        max-width: 1140px;
      }

      @media (min-width: 1400px) {
        max-width: 1320px;
      }

      >.page__header-first {
        grid-area: 1 / 1 / 2 / 2;
      }

      >.page__header-second {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: end;
      }

      >.page__header-third {
        grid-area: 2 / 1 / 3 / 3;
      }

    }
  }

  >main {
    background: #CBCACA;
    display: flow-root;
    padding-top: 100px;
    position: relative;

    >.page__content-top {
      position: absolute;
      left: 0;
      right:0;
      top: 0;
      transform: translateY(-39px);

      >div {
        margin-inline: 16px;

        @media (min-width: 576px) {
          margin-inline: auto;
          max-width: 540px;
        }
      
        @media (min-width: 768px) {
          max-width: 720px
        }
      }
    }
  }

  >footer {
    background: #CBCACA;
    padding-block: 66.75px 78px;
  }
}