arthurdanjou.fr/public/style/components/template.scss

#template {
  display: grid;
  grid-template-areas:
    "left top right"
    "left content right"
    "left bottom right";
  grid-template-columns: 20% 3fr 20%;
  grid-template-rows: 1fr;

  @media screen and (max-width: 700px) {
    grid-template-columns: 1fr 95% 1fr;
    grid-template-rows: 1fr;
  }

  .spacer:first-child {
    grid-area: top;
    height: 20vh;
    width: 100%;

    @media screen and (max-width: 700px) {
      height: 15vh;
    }
  }

  .spacer:last-child {
    grid-area: bottom;
    height: 100px;
    width: 100%;

    @media screen and (max-width: 700px) {
      height: 20px
    }
  }

  .column:first-child {
    grid-area: left;

    @media screen and (max-width: 700px) {
      display: none;
    }
  }

  .column:last-child {
    grid-area: left;

    @media screen and (max-width: 700px) {
      display: none;
    }
  }

  .template-container {
    grid-area: content;
    margin-bottom: 50px;
    border-bottom: 1px solid $black-1;

    @media screen and (max-width: 700px) {
      padding: 0;
    }

    .template-title {
      margin-bottom: 100px;

      @media screen and (max-width: 700px) {
        margin-bottom: 30px;
      }

      .question{
        color: #4a5568;
        font-style: italic;
      }

      .title {
        width: 40%;
        margin-top: 4px;
        font-size: $web-h1;
        font-weight: bold;
        letter-spacing: 3px;

        @media screen and (max-width: 700px) {
          font-size: $mobile-h1;
          width: 80%;
        }
      }

      .description {
        margin-top: 20px;
        color: #4a5568;
        width: 75%;
        line-height: 1.5rem;
        text-align: justify;
        font-size: $web-p;

        @media screen and (max-width: 700px) {
          font-size: $mobile-p;
          width: 100%;
        }
      }
    }
  }
}