@charset "utf-8";
/* CSS Document */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.grid-x-2 {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-column-gap: 2%;
}

.grid-x-2 div {
}

.grid-x-3 {
    display: grid;
    grid-template-columns: repeat(3, 31.333333333%);
    grid-column-gap: 2%;
}

.grid-x-4 {
    display: grid;
    grid-template-columns: repeat(4, 23.5%);
    grid-column-gap: 2%;
}

.grid-x-5 {
    display: grid;
    grid-template-columns: repeat(5, 18.4%);
    grid-column-gap: 2%;
}

.attached-img {
    display: grid;
    grid-template-columns: 50% 50%;
  }

@media only screen and (max-width: 1200px){
    .grid-x-4 {
        display: grid;
        grid-template-columns: repeat(3, 31.333333333%);
        grid-column-gap: 2%;
    }
}

@media only screen and (max-width: 900px){

    .grid-x-2 {
        display: grid;
        grid-template-columns: 100%;
        grid-column-gap: 2%;
    }

    .grid-x-3 {
        grid-template-columns: 50% 50%;
    }

    .grid-x-4 {
        display: grid;
        grid-template-columns: 49% 49%;
        grid-column-gap: 2%;
    }

    .attached-img {
        grid-template-columns: 100%;
      }
}

@media only screen and (max-width: 600px){
    .grid-x-3 {
        grid-template-columns: 100%;
    }
}