.content {
    grid-row: 3/4;
    grid-column: 1;
    background: url(../pic/content.jpg);    
    display: grid;
    grid-template-rows: min-content;
    grid-auto-rows: min-content;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
              
}

.item {
    border: 1px solid black;
    border-radius: 15px;
    background: #fff;
    text-align: left;
    overflow: hidden;
    text-indent: 10px;
    line-height: 25px;  
    cursor: default;
}

.head {
    width: 100%;
    height: 25px;
    border-bottom: 1px solid #888;
    border-radius: 15px;
    background: url(../pic/stars.png) no-repeat;
    background-position: 100px ;
    margin-bottom: 1px;
}

.text {
    text-align: center;   
}

.add_wrap {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1f;
}
   
.add_new {
    width: 150px;
    height: 20px;
    border-radius: 7px;
    border: none;
    box-shadow: -2px 2px 5px 2px;
    background: silver;
    margin: 40px auto;
}

.add_new:hover {
    background: #fff;
    cursor: pointer;
}

.add_new:active {
    background: #abe35f;
}


/* ---------------------------------------------------------max-width: 1000px --------------------------------------------------*/


@media (max-width: 1000px) {
    .content {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 5px;
        padding: 5px;
      
                  
    }
    
}


/* ---------------------------------------------------------max-width: 700px --------------------------------------------------*/

@media (max-width: 700px) {
    .content {
        grid-template-rows: auto;
        grid-template-columns: auto;
        margin-right: 5px;
        grid-gap: 5px;
        padding: 5px;
      
                  
    }
    
}