:root{
  --adaptative-margin: 0vw;
}

@media (max-width: 800px) {

  /* MAIN CONTENT */
  .project-links-index {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 5rem;
  }

  .project-link-container {
    position: relative;
    max-width: 90vw;
    /* max-height: 500px; */
    /* max-height: 40vh; */
    text-align: center;
    margin-bottom: 4rem;
  }

  .project-link-img {
    max-width: 15rem;
    max-height: 35vh;
  }

  .project-link-container h1 {
    font-size: 2rem;
  }

  .project-link-container p {
    display: none;
  }

  .project-link-container hgroup {
    position: relative;
    text-align: center;

    overflow: visible;
    width: 100%;
    top: 0;
    color: var(--red);

  }

  .vr {
    display: none;
  }

  #andrea {
    float: right;
    transform: translateX(-3.5rem);
  }

  #the-weather-woman {
    float: left;
    transform: translateX(0rem);
  }

  #heraia {
    float: right;
    transform: translateX(1rem);
  }

  #dahlia-rebecca {
    float: left;
    transform: translateX(-2rem);
  }

  #choke-me-baby {
    float: right;
    transform: translateX(0rem);
  }

  #lorette-cole-duprat {
    float: left;
    transform: translateX(.5rem);
  }

  #cook-my-look {
    float: right;
    transform: translateX(-10vw);
  }

  #untitled {
    float: left;
    transform: translateX(10vw);
  }

  #way-poems {
    float: right;
    transform: translateX(-8vw);
  }

  #birdbrain {
    float: left;
    transform: translateX(10vw);
  }

  #pinned-here {
    float: right;
    transform: translateX(-4vw);
  }

  #cherry-nessy {
    float: left;
    transform: translateX(8vw);
  }

  #eva {
    float: right;
    transform: translateX(-4vw);
  }

  #my-head-my-office {
    float: left;
    transform: translateX(12vw);
  }

  #a-postcard-from-riverside-drive {
    float: right;
    transform: translateX(-6vw);
  }

  #adele-la-sauterelle {
    float: left;
    transform: translateX(4vw);
  }

  #avec-la-houle {
    float: right;
    transform: translateX(-6vw);
  }

  #heartbroken {
    float: left;
    transform: translateX(8vw);
  }
  #heartbroken h1:after {
    content : "HEARTBROKEN"
  }

  #killing-it {
    float: right;
    transform: translateX(-6vw);
  }

  #lolita {
    float: left;
    transform: translateX(2vw);
  }

}

@media (min-width: 800px) {

  /* MAIN CONTENT */
  .project-links-index {
    width: 80vw;
    /* margin: 50px; */
    margin-left: 10vw;
    padding-bottom: 3rem;
    /* display: flex;
  flex-direction: column; */
  }

  .project-link-container {
    /* right: 0; */
    position: relative;
    /* max-width: 90vw; */
    max-height: 500px;
    /* height: max-content; */
  }

  .text-img-container {
    position: relative;
    margin: 2rem;
  }

  .project-link-img {
    /* position: absolute; */
    /* min-width: 400px; */
    /* height: 450px; */
    max-width: 30vw;
    max-height: 30vw;
    /* margin-top: 30px; */
    /* margin-bottom: 30px; */
    transition: opacity 0.2s;
  }

  .project-link-container h1 {
    /* font-size: 3rem; */
    font-size: 3.5vw;
  }

  .project-link-container p {
    /* font-size: 1.5rem;
    line-height: 1.8rem; */
    font-size: 1.8vw;
    line-height: 2vw;
  }

  .project-link-container hgroup {
    position: absolute;
    opacity: 0;
    margin: 15px;
    font-size: 2rem;
    width: calc(100% - 15px);
    top: 0;
    left: 0;
    color: var(--red);
    transition: opacity 0.2s;
  }

  .project-link-container:hover hgroup {
    opacity: 1;
  }

  .project-link-container .project-link-img {
    transition: filter 0.2s;
  }

  .project-link-container:hover .project-link-img {
    filter: brightness(50%);
  }

  .vr {
    width: 1px;
    height: calc(100% - 100px);
    background-color: var(--red);
    position: fixed;
    right: 50px;
    top: 50px;
  }

  #a-postcard-from-riverside-drive {
    position: absolute;
    transform: translateX(40vw);
    /* margin-top: calc(var(--adaptative-margin) + 150px); */
    margin-top: 10vw;
  }

  #heartbroken {
    position : absolute;
    transform: translateX(5vw);
    /* margin-top: calc(var(--adaptative-margin) + 300px); */
    margin-top: 30vw;
  }
   #heartbroken h1:after {
    content : "HEART-BROKEN"
  }

  #killing-it {
    position : absolute;
    transform: translateX(35vw);
    /* margin-top: calc(var(--adaptative-margin) + 700px); */
    margin-top: 50vw;
  }

  #lolita {
    position : absolute;
    transform: translateX(0vw);
    /* margin-top: calc(var(--adaptative-margin) + 950px); */
    margin-top: 70vw;

  }

  #avec-la-houle {
    position : absolute;
    transform: translateX(45vw);
    /* margin-top: calc(var(--adaptative-margin) + 1200px); */
    margin-top: 90vw;

  }

  #adele-la-sauterelle {
    position : absolute;
    transform: translateX(5vw);
    /* margin-top: calc(var(--adaptative-margin) + 1600px); */
    margin-top: 110vw;

  }


  #andrea {
    position : absolute;
    transform: translateX(40vw);
    /* margin-top: calc(var(--adaptative-margin) + 1800px); */
    margin-top: 130vw;

  }

  #the-weather-woman {
    position : absolute;
    transform: translateX(0vw);
    /* margin-top: calc(var(--adaptative-margin) + 2200px); */
    margin-top: 150vw;

  }

  #heraia {
    position : absolute;
    transform: translateX(50vw);
    /* margin-top: calc(var(--adaptative-margin) + 2500px); */
    margin-top: 170vw;

  }

  #dahlia-rebecca {
    position : absolute;
    transform: translateX(5vw);
    /* margin-top: calc(var(--adaptative-margin) + 2800px); */
    margin-top: 190vw;

  }

  #choke-me-baby {
    position : absolute;
    transform: translateX(40vw);
    /* margin-top: calc(var(--adaptative-margin) + 3100px); */
    margin-top: 210vw;

  }

  #lorette-cole-duprat {
    position : absolute;
    transform: translateX(0vw);
    /* margin-top: calc(var(--adaptative-margin) + 3500px); */
    margin-top: 230vw;

  }

  #cook-my-look {
    position : absolute;
    transform: translateX(50vw);
    /* margin-top: calc(var(--adaptative-margin) + 3700px); */
    margin-top: 250vw;

  }

  #untitled {
    position : absolute;
    transform: translateX(0vw);
    /* margin-top: calc(var(--adaptative-margin) + 4000px); */
    margin-top: 270vw;

  }

  #way-poems {
    position : absolute;
    transform: translateX(40vw);
    /* margin-top: calc(var(--adaptative-margin) + 4300px); */
    margin-top: 290vw;

  }

  #birdbrain {
    position : absolute;
    transform: translateX(5vw);
    /* margin-top: calc(var(--adaptative-margin) + 4600px); */
    margin-top: 310vw;

  }

  #pinned-here {
    position : absolute;
    transform: translateX(50vw);
    /* margin-top: calc(var(--adaptative-margin) + 4900px); */
    margin-top: 330vw;

  }

  #cherry-nessy {
    position : absolute;
    transform: translateX(0vw);
    /* margin-top: calc(var(--adaptative-margin) + 5300px); */
    margin-top: 350vw;

  }

  #eva {
    position : absolute;
    transform: translateX(40vw);
    /* margin-top: calc(var(--adaptative-margin) + 5500px); */
    margin-top: 370vw;

  }

  #my-head-my-office {
    position : absolute;
    transform: translateX(5vw);
    /* margin-top: calc(var(--adaptative-margin) + 6000px); */
    margin-top: 390vw;
    padding-bottom: 100px;
  }

}