.gridOfIndexPage {
  display: grid;
  column-gap: 2rem;
  row-gap: 3rem;
  padding : 1rem;
}

.ss-news {
    grid-area: ss-news;
}
.ss-movement {
    grid-area: ss-movement;
}
.ss-activity {
    grid-area: ss-activity;
}
.ss-shortcut{
    grid-area : ss-shortcut;
}



@media (max-width: 480px) 
{
  .gridOfIndexPage 
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
            "ss-news"
            "ss-movement"
            "ss-activity"
            "ss-shortcut";
  }
}
@media (min-width: 481px) and (max-width: 767px) 
{
  .gridOfIndexPage 
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
            "ss-news" "ss-movement"
            "ss-activity" 
            "ss-shortcut";
  }
}
@media (min-width: 768px) and (max-width: 979px) 
{
  .gridOfIndexPage 
  {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
            "ss-news ss-movement"
            "ss-activity ss-activity"
            "ss-shortcut ss-shortcut";
  }
}
@media (min-width: 980px) and (max-width:1199px) 
{
  .gridOfIndexPage 
  {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
            "ss-news ss-movement"
            "ss-activity ss-activity"
            "ss-shortcut ss-shortcut";
  }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
  .gridOfIndexPage 
  {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
            "ss-news ss-movement"
            "ss-activity ss-activity"
            "ss-shortcut ss-shortcut";
  }
}
@media (min-width: 1920px) 
{
  .gridOfIndexPage 
  {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
            "ss-news ss-movement"
            "ss-activity ss-activity"
            "ss-shortcut ss-shortcut";
  }
}