.text {
  grid-area: txt;
  margin-bottom: 4em;
}

.catalogue {
  grid-area: cat;
  position: relative;
}

.catalogue .preview-image {
  width: 100%;
}



/*****************************************************************************
    responsive area
*****************************************************************************/

@media (min-width:769px) {
  .container {
    padding-top: 90px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    grid-template-areas:
      '.   .   .   cat cat cat cat cat cat cat txt  .   '
  }

  .text {
    padding-top: 1em;
  }

  .desktop {
    display: unset;
  }

  .mobile {
    display: none;
  }

}

@media only screen and (max-width: 1200px) {
  .container {
    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px;
    display: grid;
    grid-column-gap: 0;
    grid-template-areas:
      
      '.   .   .   .  cat cat cat cat cat cat cat   .   '
      '.   .   .   .  cat cat cat cat cat cat cat   .   '
      '.   .   .   .  txt txt txt txt txt txt txt   .   '
      '.   .   .   .  txt txt txt txt txt txt txt   .   ';
  }
}

@media only screen and (max-width:768px) {
  .container {
    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px;
    display: grid;
    grid-column-gap: 0;
    grid-template-areas:
     
      '.   cat cat cat cat cat cat cat cat cat cat   .   '
      '.   cat cat cat cat cat cat cat cat cat cat   .   '
      '.   txt txt txt txt txt txt txt txt txt txt   .   '
      '.   txt txt txt txt txt txt txt txt txt txt   .   ';
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: unset;
  }
}