* {
  color: navy;
  text-align: center;
}

.selectorpage {
  display: grid;
  grid-template-areas:
    'header'
    'item1'
    'item2'
    'item3'
    'item4'
    'item5'
  ;
  gap: 15px;
  background-color: rgba(211, 211, 211, 0.88);
  border: 0.3rem solid navy;
  padding: 1rem;
  font-size: 2rem;
}

.selectorpage>div {
  background-color: white;
}

.header {
  grid-area: header;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item1,
.item2,
.item3,
.item4,
.item7 {
  border: 3px solid navy;
  background-color: white;
  /* text-align: center; */
  text-decoration: none;
  padding: 0.5rem;
  width: 220px;
  margin: auto;
}

.item5 {
  border: 3px solid navy;
}

.item6 {
  border: 3px solid green;
  color: green;
  background-color: white;
  /* text-align: center; */
  text-decoration: none;
  padding: 0.5rem;
  width: 220px;
  margin: auto;
}

.header {
  font-weight: bold;
  font-size: 2.2rem;
  padding: 10px 25px;
  border: 0.3rem solid navy;
}

a:hover {
  background-color: navy;
  color: white;
}

a.item6:hover {
  color: white;
  background-color: green;
}

/* @media screen and (min-width:600px) {  
  .selectorpage {
    display: grid;
    grid-template-areas: 
    'header header header header header header'
    ' . . item1  item2 . .'
    ' . . item3 item4 . .'
    'item5 item5 item5 item5 item5 item5'
    ;      
  }   
} */
@media screen and (min-width:600px) {
  .selectorpage {
    display: grid;
    grid-template-areas:
      '  header header  '
      ' item1  item2'
      ' item3 item4 '
      ' item5 item5  ' 
   ;
  }
}
  @media screen and (min-width:1050px) {
    .selectorpage {
      display: grid;
      grid-template-areas:
        'header header header header '
        '  item1  item2  item3 item4  '
        ' item5 item5 item5 item5 '
      ;
    }
  }