@media screen and (min-width: 500px) {
.link {
    border: 3px solid;
    border-radius: 35%;  
    padding-left: 50px;
    padding-right: 50px;
}

.grid > * {
    background-color: #4D7298;
    border: 2px solid #77A6B6;
    border-radius: .5em;
    color: #fff;
    padding: .5em;
  }

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    "title  title title"
    "sidebarL main sidebarR"
    "footer footer footer";
}

header {
    padding-left: 30px;
    padding-right: 30px;
}

.header {
    grid-area: title;
}
.main {
    grid-area: main;
}
.sidebarL {
    grid-area: sidebarL;
}
.sidebarR {
    grid-area: sidebarR;
}
.footer {
    grid-area: footer;
}
}

@media screen and (max-width: 500px) {
    .link {
        border: 3px solid;
        border-radius: 35%;  
        padding-left: 50px;
        padding-right: 50px;
    }
    
    .grid > * {
        background-color: #4D7298;
        border: 2px solid #77A6B6;
        border-radius: .5em;
        color: #fff;
        padding: .5em;
      }
    
    .grid {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "title  title title"
        "sidebarL main sidebarR"
        "footer footer footer";
    }
    
    header {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .header {
        grid-area: title;
    }
    .main {
        grid-area: main;
    }
    .sidebarL {
        grid-area: sidebarL;
    }
    .sidebarR {
        grid-area: sidebarR;
    }
    .footer {
        grid-area: footer;
    }
    }