h3{
    text-align: center;
    margin: 1vh;
}

a{
    /* display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: gray;
    width: 10%;  это grid!!!*/ 
}

.content{
    background-color: lightgreen;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding:10px;
}

.topic > b{
    display: block;
    width: 40%;
}
.topic * {
    display: inline-block;
}
.content :first-child b, .content :first-child  a{
    background-color: lightgreen;
}

.topic{
    /* width:calc(50%-10px); */
    padding:5px 10px;
    margin: 10px ;
    background-color: white;
}
@media (max-width:800px) {
    .content{
        display: flex;
        flex-direction: column;
    }
    .topic{
        width: calc(100%-20px);
        /* width:50%; */
    }
}

/* grid part */

p{
    margin:  5px auto;
    max-width: 600px;
    display: grid;
    grid-template-rows: 1fr 1fr; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 5px;
}
p > a{
    background-color: lightgray;
    text-decoration: none;
    color: black;
    text-align: center;
}
p> :first-child{
    background-color: lightgreen;
}