.container {
max-width: 960px;
display: flex;
justify-content: space-between;
margin-top: 20px;
flex-wrap: wrap;
}
.prev,
.next,
.menu {
display: flex;
flex-wrap: wrap;
width: 33%;
}
.prev {
justify-content: left;
}
.next {
justify-content: right;
}
.menu {
justify-content: center;
}
.container a {
text-decoration: none;
background-color: #f8f9fa;
border-radius: 2px;
margin: 5px;
padding: 10px;
font-family: sans-serif;
}
.prev a {
color: #b32425;
}
.prev a:hover {
background-color: #fee7e6;
}
.prev a:active {
background-color: #b32425;
color: white;
}
.next a {
color:#14866d;
}
.next a:hover {
background-color: #d5fdf4;
}
.next a:active {
background-color: #14866d;
color: white;
}
.menu a {
color: #2a4b8d;
}
.menu a:hover {
background-color: #eaf3ff;
}
.menu a:active {
background-color: #2a4b8d;
color: white
}
@media screen and (min-width: 480.1px) and (max-width: 768px) {
.container a {
display:block;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.prev, .next, .menu {
width: 100%;
justify-content: center;
}
.container a {
padding: 7.5px;
}
}