index-soutien/assets/css/template/support/_layout.scss

[data-template='support'] {
  section {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-bottom: calc(var(--spacing) * 0.75);
    margin-bottom: calc(var(--spacing) * 0.75);
    border-bottom: var(--border-light);
  }

  #section__hero {
    margin-top: calc(var(--spacing) * 1);
    display: block;
  }

  #section__questions {
    border-bottom: none;
  }

  #section__donation:target {
    padding-top: calc(var(--header-h) * 1.25);
  }

  #section__video {
    display: flex;
    flex-direction: column;
    align-items: center;

    .video-container {
      display: flex;
    }
    video {
      width: 100%;
      border: 1px solid var(--grey-800);
      max-height: 90vh;
      display: flex;
    }
  }

  @media #{$medium-up} {
    main {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: repeat(4, auto);
      max-width: 1200px;
      margin: 0 auto;
      padding-bottom: 0;
    }

    #section__donation {
      padding-top: calc(var(--spacing) * 1);
    }

    #section__donation,
    #section__comments {
      border: none;
    }

    #section__baseline {
      padding: calc(var(--spacing) * 0.5) 0;
    }

    .col-left,
    .col-right {
      padding-top: calc(var(--spacing) * 1);
    }
    .col-left {
      grid-column: 1;
      grid-row: 1/5;
    }
    .col-right {
      position: sticky;
      top: calc(var(--spacing) * 2.5);
      grid-column: 2;
      grid-row: 1;
      overflow: hidden;
    }
  }

  @media #{$medium} {
    main {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      max-width: 600px;
      margin: 0 auto;
    }

    section {
      width: 100%;
    }

    .col-left,
    .col-right {
      display: contents;
    }

    #section__hero {
      order: 1;
    }
    #section__donation {
      order: 2;
    }
    #section__baseline {
      order: 3;
    }
    #section__video {
      order: 4;
    }
    #section__comments {
      order: 5;
    }
    #section__questions {
      order: 6;
      margin-bottom: calc(var(--spacing) * 2);
    }
  }

  @media #{$paysage} {
    .col-left,
    .col-right {
      display: contents;
    }

    section {
      width: 100%;
    }

    #section__donation {
      grid-row: 1;
      grid-column: 2;
      position: sticky;
      top: calc(var(--spacing) * 3.75);
    }

    #section__hero {
      grid-row: 1;
      grid-column: 1;
    }
    #section__baseline {
      grid-row: 2;
      grid-column: 1;
    }
    #section__video {
      grid-row: 3;
      grid-column: 1;
    }
    #section__comments {
      grid-row: 4;
      grid-column: 1;
      border-bottom: var(--border-light);
    }
    #section__questions {
      grid-row: 5;
      grid-column: 1;
    }
  }
}