/*
* Name : stylesheet of Maxime Genand's portfolio
* Website : maximegenand.dev
* Author: Maxime Genand
* Version: 2.2.0
*/

/**************   FONTS   **************/
@font-face {
  font-family: 'Oswald';
  font-weight: 400;
  src: url('./oswald-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-weight: 500;
  src: url('./oswald-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  src: url('./poppins-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  src: url('./poppins-700.woff2') format('woff2');
  font-display: swap;
}

/**************   VARS   **************/
:root {
  --color-primary: #bb8d00;
  --color-titles: #4682b4;

  --color-text: #122740;
  --color-light: #cadff6;

  --color-link: #122740;
  --color-link-light: #ffffff;
  --color-link-hover: #444444;
  --color-link-light-hover: #ffffff;

  --color-bg-dark: #134074;
  --color-bg-light: #ffffff;
  --color-bg-article-1: #edf4fccc;
  --color-bg-article-2: #ffffffcc;

  --max-width: 1200px;
  --min-width: 360px;

  --font-titles: Oswald, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
    sans-serif;
  --font-paragraphes: Poppins, 'Helvetica Neue', Helvetica, Arial,
    'Lucida Grande', sans-serif;
}

/**************   DEFAULT   **************/
* {
  box-sizing: border-box;
}
html,
body {
  min-width: var(--min-width);
  font-family: var(--font-paragraphes);
  scroll-behavior: smooth;
}
h1,
h2,
h3 {
  font-family: var(--font-titles);
  font-weight: 500;
  font-variant: small-caps;
  & span {
    display: block;
    padding-top: 0.5em;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    @-moz-document url-prefix() {
      font-size: 0.7em;
    }
  }
}
h1 {
  font-size: 3rem;
}
h2 {
  text-align: center;
  font-size: 2rem;
}
h3 {
  font-size: 1.3rem;
}
p {
  margin: 0 0 0.5em 0;
  padding: 0;
  font-family: var(--font-paragraphes);
}
a {
  color: var(--color-link);
  text-decoration: underline;
  &.screens {
    display: contents;
  }
}
a:hover {
  color: var(--color-link-hover);
}
abbr {
  cursor: help;
}
ul,
menu {
  margin: 0;
  padding: 0;
  font-family: var(--font-paragraphes);
  list-style-type: none;
}
figure {
  text-align: center;
  margin: 0;
  padding: 0;
}
figcaption.fig-title {
  font-family: var(--font-paragraphes);
  font-weight: 700;
  letter-spacing: -0.05em;
  padding: 0.5em;
}
hr {
  width: 75%;
  margin: 2em auto;
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    var(--color-primary),
    rgba(0, 0, 0, 0)
  );
  &::before,
  &::after {
    display: block;
    position: relative;
    content: '';
    height: 1px;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 25%,
      var(--color-primary),
      rgba(0, 0, 0, 0) 75%
    );
  }
  &::before {
    top: -1px;
  }
}

/**************   GENERAL CLASSES   **************/
.center {
  text-align: center;
}
.preload * {
  transition: none !important;
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  & img {
    flex-shrink: 0;
  }
}
.long-text {
  font-size: 0.8em;
}
.grid {
  display: grid;
  row-gap: 1.5em;
}
.no-m-top {
  margin-top: 0;
}
.zoom {
  overflow: hidden;
  & > * {
    transition: 0.5s;
    &:hover {
      transform: scale(1.1);
    }
  }
}
.hidden {
  display: none;
}
a.button {
  white-space: nowrap;
  padding: 0.25em 0.5em;
  color: #8a6700;
  font-family: var(--font-titles);
  font-weight: 500;
  font-variant: small-caps;
  font-size: 1.3em;
  letter-spacing: 0.03em;
  text-decoration: none;
  background-color: #eee2bf;
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #8a6700;
  border-radius: 0.2em;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease-in-out;
  @-moz-document url-prefix() {
    font-size: 1.2em;
  }
  &::after {
    content: '→';
    padding-inline: 0.5em;
    font-size: 1.1em;
  }
  &:hover {
    background-color: #dec67c;
  }
  &:active {
    background-color: #dec67c;
    border-width: 2px 1px 1px 2px;
  }
}
.img-loader {
  display: block;
  max-width: 100%;
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

/**************   DESIGN   **************/

html {
  background: url('../images/background-v2.webp') no-repeat center center fixed;
  background-size: cover;
}
#container {
  min-width: var(--min-width);
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.7);
  & header {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 4rem;
    min-width: var(--min-width);
    background-color: var(--color-bg-dark);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0);
    transition: height 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    &.scroll {
      height: 3rem;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    }
    & div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2em;
      max-width: var(--max-width);
      height: 100%;
      margin-inline: auto;
      padding-inline: clamp(1rem, 3%, 5rem);
      & svg {
        flex-shrink: 0;
        height: 3em;
        fill: var(--color-primary);
        cursor: pointer;
      }
    }
  }
  & main {
    overflow: hidden;
  }
  & footer {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: 1em;
    font-size: 0.9em;
    background-color: var(--color-bg-dark);
    & p {
      margin: 0;
      text-align: center;
      color: var(--color-light);
    }
  }
}

/**************   Menu   **************/

label#menu {
  & input {
    display: none;
  }
  & > span {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    z-index: 100;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    transition: height 0.25s ease-in-out;
    & > span {
      position: relative;
      display: block;
      width: 2.5rem;
      height: 0.3rem;
      background-color: var(--color-link-light-hover);
      border-radius: 3px;
      transform-origin: center;
      transition: background-color 0s 0.25s ease-in-out;
      &::before,
      &::after {
        display: block;
        content: '';
        position: absolute;
        width: 2.5rem;
        height: 0.3rem;
        background-color: var(--color-link-light-hover);
        border-radius: 3px;
        transform-origin: center;
        transition: top 0.25s 0.25s ease-in-out, transform 0.25s ease-in-out;
      }
      &::before {
        top: -0.75rem;
      }
      &::after {
        top: 0.75rem;
      }
    }
  }
  & menu {
    position: fixed;
    top: 0;
    right: -50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    width: 50%;
    height: 100%;
    font-variant: small-caps;
    background-color: var(--color-bg-dark);
    transition: right 0.25s ease-out;
    & li {
      & a {
        position: relative;
        color: var(--color-link-light);
        text-decoration: none;
        &::before,
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 0;
          height: 0;
          transform: translateX(-50%);
          border-bottom: 1px solid var(--color-link-light);
          transition: width 0.15s ease-in-out;
        }
        &::before {
          top: 0px;
        }
        &::after {
          bottom: -1px;
        }
        &:hover {
          color: var(--color-link-light);
          &::before,
          &::after {
            width: 100%;
          }
        }
      }
    }
  }
  & .blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
  & input:checked {
    & + span > #hamburger {
      background-color: rgba(255, 255, 255, 0);
      &::before,
      &::after {
        top: 0;
        transition: top 0.25s ease-in-out, transform 0.25s 0.25s ease-in-out;
      }
      &::before {
        transform: rotate(-45deg);
      }
      &::after {
        transform: rotate(45deg);
      }
    }
    & ~ menu {
      right: 0;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    }
    & ~ .blur {
      width: 50%;
      height: 100%;
      backdrop-filter: blur(4px);
      transition: backdrop-filter 0s 0.25s linear;
    }
  }
}
header.scroll label#menu {
  & > span {
    height: 3rem;
  }
}

/**************   Content   **************/

article {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  min-height: min(100vh, 1000px);
  margin: 0 auto;
  padding: 6em clamp(1em, 3%, 2em) 2em;
  color: var(--color-text);
  &:nth-of-type(odd) {
    background-color: var(--color-bg-article-1);
  }
  &:nth-of-type(even) {
    background-color: var(--color-bg-article-2);
  }
  &.space-evenly {
    justify-content: space-evenly;
    padding-top: 4em;
  }
  & > .content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 0px solid red;
  }
  & p {
    font-size: 0.9em;
    line-height: 1.5em;
  }
  & p + p {
    margin-top: 2em;
  }
  & img.small,
  & img.medium,
  & img.large,
  & img.full {
    margin: 0.5em auto;
    padding: 3px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-text);
    border-radius: 6px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
  }
  & img.small {
    width: clamp(100px, 50%, 200px) !important;
  }
  & img.medium {
    width: clamp(200px, 50%, 300px) !important;
  }
  & img.large {
    width: clamp(300px, 50%, 500px) !important;
  }
  & img.full {
    width: 100% !important;
  }
  & img.small.no-border,
  & img.medium.no-border,
  & img.large.no-border,
  & img.full.no-border {
    border-width: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  /**************   Page d'accueil   **************/
  /*** SECTION PRESENTATION ***/
  &#presentation {
    & > div {
      display: grid;
      grid-template-areas:
        'portrait title'
        'content1 content1'
        'content2 content2'
        'content3 content3';
      grid-template-columns: clamp(150px, 40%, 300px) 1fr;
      column-gap: clamp(1em, 5%, 5em);
      & #portrait {
        display: inline-block;
        grid-area: portrait;
        align-self: center;
        width: 100%;
        aspect-ratio: 2/3;
        margin-bottom: 1em;
        border-radius: 40% 60% 40% 60%;
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
        & img {
          width: 100%;
          aspect-ratio: 2/3;
          object-fit: cover;
        }
      }
      & h1 {
        grid-area: title;
        align-self: center;
      }
      & .content1,
      & .content2,
      & .content3 {
        align-self: flex-end;
      }
      & .content1 {
        grid-area: content1;
      }
      & .content2 {
        grid-area: content2;
      }
      & .content3 {
        grid-area: content3;
        text-align: right;
      }
      & p {
        font-size: 0.9em;
        line-height: 1.85;
      }
    }
    & > ul {
      display: flex;
      flex-direction: column;
    }
  }
  /*** SECTION SERVICES ***/
  &#services {
    & .content .services-grid {
      display: grid;
      row-gap: 1.5em;
      & > div {
        display: flex;
        align-items: center;
        gap: 1em;
        & h3 {
          margin: 0 0 0.25em 0;
        }
        & .svg {
          display: inline-flex;
          padding: 0.5em;
          background-color: #fff;
          border: 2px solid var(--color-primary);
          border-radius: 1em;
          transition: background-color 0.3s;
          & svg {
            fill: var(--color-primary);
            font-size: 3em;
            transition: fill 0.3s, stroke 0.3s;
            &.stroke {
              fill: transparent;
              stroke: var(--color-primary);
            }
          }
        }
        & p {
          opacity: 0.7;
          transition: opacity 0.3s;
        }
        &:hover {
          & .svg {
            background-color: var(--color-primary);
            & svg {
              fill: #fff;
              &.stroke {
                fill: transparent;
                stroke: #fff;
              }
            }
          }
          & p {
            opacity: 1;
          }
        }
      }
    }
  }
  /*** SECTION PORTFOLIO ***/
  & #projects {
    display: grid;
    grid-template-columns: 2fr;
    justify-items: center;
    justify-content: space-evenly;
    align-items: end;
    gap: 2em;
    & > div {
      position: relative;
      width: clamp(200px, 80%, 300px);
      overflow: hidden;
      text-align: center;
      border-width: 1px 2px 2px 1px;
      border-style: solid;
      border-color: var(--color-primary);
      border-radius: 0.3rem;
      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
      transition: background-color 0.2s ease-in-out;
      & h3 {
        margin: 0;
        padding: 0.3em 0;
        color: var(--color-primary);
        background-color: #fff;
        border-bottom: 1px solid var(--color-primary);
      }
      & a {
        display: block;
        &::after {
          display: flex;
          justify-content: center;
          align-items: center;
          content: '+';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 1em;
          height: 1em;
          color: #fff;
          font-size: 80px;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.2s ease-in;
        }
        & figure {
          position: relative;
          display: flex;
          padding: 5px;
          background-color: #fff;
          & img {
            width: 100%;
            aspect-ratio: 1;
            opacity: 1;
            object-fit: cover;
            transition: opacity 0.2s ease-in-out;
          }
          & > figcaption {
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translateY(100%);
            width: 100%;
            padding: 0.5em;
            background-color: #fff;
            border-top: 1px solid #8a6700;
            transition: transform 0.2s ease-in;
          }
        }
        & .techno {
          position: absolute;
          top: 4em;
          right: 0;
          & li {
            margin: 0.5em;
            padding: 0.5em;
            color: #fff;
            background-color: var(--color-primary);
            border: 2px solid #8a6700;
            border-radius: 0.5em;
            box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
          }
        }
      }
      &:hover a {
        &::after {
          transform: translate(-50%, -50%);
          opacity: 1;
          transition: opacity 0.2s ease-out;
        }
        & img {
          opacity: 0.8;
        }
        & figcaption {
          color: var(--color-link);
          transform: translateY(0);
          transition: transform 0.2s ease-out;
        }
      }
      &:active {
        border-width: 2px 1px 1px 2px;
      }
      &.lead {
        width: clamp(250px, 85%, 350px);
        & h3 {
          color: #fff;
          background-color: var(--color-primary);
        }
      }
    }
  }
  /*** SECTION COMPETENCES ***/
  &#competences {
    & .flex {
      justify-content: space-evenly;
      align-items: flex-start;
      gap: 0;
      width: clamp(300px, 85%, 1000px);
      min-height: 50vh;
      margin-inline: auto;
      padding: 1em;
      background-color: #fff;
      border: 1px solid #122740;
      border-radius: 6px;
      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
      & div {
        padding-left: 20%;
        & li {
          position: relative;
          padding: 0.7em 0 0.7em 2.6em;
          &::before {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            content: '';
            width: 1.8em;
            height: 1.8em;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            filter: invert(73%) sepia(88%) saturate(4423%) hue-rotate(20deg)
              brightness(94%) contrast(101%);
          }
          &.svg-react::before {
            background-image: url('../images/icons/monochrome/react.svg');
          }
          &.svg-next::before {
            background-image: url('../images/icons/monochrome/next.svg');
          }
          &.svg-expo::before {
            background-image: url('../images/icons/monochrome/expo.svg');
          }
          &.svg-vue::before {
            background-image: url('../images/icons/monochrome/vue.svg');
          }
          &.svg-typescript::before {
            background-image: url('../images/icons/monochrome/typescript.svg');
          }
          &.svg-node::before {
            background-image: url('../images/icons/monochrome/node.svg');
          }
          &.svg-php::before {
            background-image: url('../images/icons/monochrome/php.svg');
          }
          &.svg-mongodb::before {
            background-image: url('../images/icons/monochrome/mongo.svg');
          }
          &.svg-mysql::before {
            background-image: url('../images/icons/monochrome/mysql.svg');
          }
          &.svg-github::before {
            background-image: url('../images/icons/monochrome/github.svg');
          }
          &.svg-vercel::before {
            background-image: url('../images/icons/monochrome/vercel.svg');
          }
          &.svg-docker::before {
            background-image: url('../images/icons/monochrome/docker.svg');
          }
        }
        &.separe {
          align-self: stretch;
          width: auto;
          height: 1px;
          margin: 1em 10% 0;
          padding: 0;
          background-color: var(--color-primary);
        }
      }
    }
    & #skills {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      gap: 2em;
      padding: 1em;
      background-color: #fff;
      border: 1px solid #122740;
      border-radius: 6px;
      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
      & img {
        width: 4em;
      }
    }
  }
  /*** SECTION CONTACT ***/
  & #list-contact {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: clamp(300px, 75%, 400px);
    min-height: 50vh;
    margin-inline: auto;
    padding: 1em;
    background-color: #fff;
    border: 1px solid #122740;
    border-radius: 6px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
    & li {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1 0 auto;
      padding: 1em 0 1em 3.5em;
      border-top: 1px solid var(--color-primary);
      &:first-child {
        border-top: 0;
      }
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content: '';
        width: 2.5em;
        height: 2.5em;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        filter: invert(73%) sepia(88%) saturate(4423%) hue-rotate(20deg)
          brightness(94%) contrast(101%);
      }
      &.svg-phone::before {
        background-image: url('../images/icons/monochrome/phone.svg');
      }
      &.svg-email::before {
        background-image: url('../images/icons/monochrome/mail.svg');
      }
      &.svg-malt::before {
        background-image: url('../images/icons/monochrome/malt.svg');
      }
      &.svg-linkedin::before {
        background-image: url('../images/icons/monochrome/linkedin.svg');
      }
      & h3 {
        font-size: 1.3em;
        margin: 0 0 0.5em;
      }
      & a {
        position: relative;
        align-self: flex-start;
        text-decoration: none;
        &::after {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 50%;
          width: 0;
          height: 0;
          transform: translateX(-50%);
          border-bottom: 1px solid var(--color-link-hover);
          transition: width 0.15s ease-in-out;
        }
        &:hover::after {
          width: 100%;
        }
      }
    }
  }
}

/**************   Page portfolio   **************/
#map {
  display: flex;
  justify-content: center;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 4.5em clamp(1rem, 3%, 5rem) 0.5em;
  background: var(--color-bg-light);
  & ul {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    width: 100%;
    max-width: var(--max-width);
    border: 0px solid red;
    & li {
      color: var(--color-text);
      font-size: 1.3em;
      font-family: var(--font-titles);
      font-variant: small-caps;
      @-moz-document url-prefix() {
        font-size: 1.2em;
      }
      &:not(:first-child)::before {
        content: '/';
        padding-right: 0.5em;
      }
      & a {
        color: var(--color-primary);
        &:hover {
          color: var(--color-link-hover);
        }
      }
    }
  }
}
article.portfolio {
  padding-top: 1em;
  & h1 {
    margin-bottom: 0;
    text-align: center;
    color: var(--color-primary);
  }
  & h1 + p {
    text-align: center;
    font-size: 1em;
  }
  & .presentation {
    & p {
      font-size: 0.9em;
    }
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 2em;
    & img {
      align-self: flex-start;
      &.large {
        max-width: 300px;
      }
    }
  }
  & .gallery {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2em;
    margin-top: 2em;
  }
  & .small-list {
    font-size: 0.9em;
    line-height: 1.5em;
    margin-block: 0.5em 1em;
    padding-left: 2em;
    & li:not(:last-child) {
      padding-bottom: 1em;
    }
  }
  & ul.small-list {
    list-style-type: disc;
  }
  & ol.small-list {
    list-style-type: decimal;
  }
}

/****************   Media Queries   ***************/

@media (min-width: 480px) {
  .flex-480 {
    flex-direction: row;
    gap: 2em;
    & p {
      text-align: left;
    }
  }
  .long-text {
    font-size: 0.9em;
  }
}

@media (min-width: 640px) {
  label#menu {
    & > span {
      display: none;
    }
    & menu {
      position: static;
      flex-direction: row;
      justify-content: flex-end;
      background-color: transparent;
      font-size: 1.1em;
      width: auto;
      gap: 1.5em;
      @-moz-document url-prefix() {
        font-size: 1em;
      }
    }
    & .blur {
      display: none;
    }
  }
  .flex-640 {
    flex-direction: row;
    gap: 2em;
    & p {
      text-align: left;
    }
  }
  .long-text {
    font-size: 1em;
  }
  article {
    & h2 {
      font-size: 2.8em;
      @-moz-document url-prefix() {
        font-size: 2.5em;
      }
    }
    & h3 {
      font-size: 2rem;
      @-moz-document url-prefix() {
        font-size: 1.8em;
      }
    }
    &#presentation > div {
      grid-template-areas:
        'portrait title'
        'portrait content1'
        'content2 content2'
        'content3 content3';
      row-gap: 0;
      & h1 {
        align-self: flex-start;
      }
    }
    &#competences .flex {
      & div {
        padding: 0;
        & li {
          padding: 1.2em 0 1.2em 2.8em;
          &::before {
            width: 2em;
            height: 2em;
          }
        }
        &.separe {
          flex-shrink: 0;
          width: 1px;
          height: auto;
          margin: 5em 0 1em;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  label#menu menu {
    gap: 2em;
    font-size: 1.3em;
    @-moz-document url-prefix() {
      font-size: 1.2em;
    }
  }
  .flex-768 {
    flex-direction: row;
    gap: 2em;
    & h3,
    & p {
      text-align: left;
    }
  }
  .services-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 5em;
    & > div:nth-child(odd) {
      flex-direction: row-reverse;
      text-align: right;
    }
  }
  .align-768 {
    text-align: left;
  }
  article#presentation > div {
    grid-template-areas:
      'portrait title'
      'portrait content1'
      'portrait content2'
      'content3 content3';
    & h1 {
      align-self: center;
    }
  }
  article.portfolio .presentation {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .flex-1024 {
    flex-direction: row;
    gap: 2em;
    & h3,
    & p {
      text-align: left;
    }
  }
  #projects {
    grid-template-columns: 4fr 5fr 4fr !important;
    grid-auto-flow: row dense;
    & div.lead {
      grid-column: 2 !important;
    }
  }
  article {
    &:not(.portfolio) h2 {
      font-size: 3rem;
    }
    &#presentation > div {
      grid-template-areas:
        'portrait title'
        'portrait content1'
        'portrait content2'
        'portrait content3';
      & h1 {
        font-size: 5rem;
        & > span {
          font-size: 3rem;
        }
      }
    }
  }
}

@media (hover: none) {
  #projects figcaption {
    transform: translateY(0) !important;
  }
}