/* this is the layout for the form of the views */

.phantom-news-grid-layout {
  form {
    display: grid;
    gap: 40px;
    grid-template-rows: repeat(5, auto);

    > div:nth-child(4n + 1) {
      margin: 0;
      grid-row: 1;
    }
    > div:nth-child(4n + 2) {
      margin: 0;
      grid-row: 2;
    }
    > div:nth-child(4n + 3) {
      margin: 0;
      grid-row: 3;
    }
    > div:nth-child(4n + 4) {
      margin: 0;
      grid-row: 4;
    }

    /* button container */
    > div:nth-child(5n + 5) {
      margin: 0;
      grid-row: 5;
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      gap: 10px;
    }
  }
}

@media (min-width: 1024px) {
  .phantom-news-grid-layout {
    form {
      gap: 40px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, auto);

      > div:nth-child(4n + 1) {
        grid-row: 1;
        grid-column: 1;
      }
      > div:nth-child(4n + 2) {
        grid-row: 1;
        grid-column: 2;
      }
      > div:nth-child(4n + 3) {
        grid-row: 1;
        grid-column: 3;
      }
      > div:nth-child(4n + 4) {
        grid-row: 1;
        grid-column: 4;
      }
      /* button container */
      > div:nth-child(5n + 5) {
        grid-row: 2;
        grid-column: 4;
      }
    }
  }
}

/* form button */
.phantom-news-grid-layout {
  form {
    .button {
      background-color: red;
    }
    .button:hover {
      opacity: 0.8;
    }
  }
}