.containers {
    display: grid;
    grid-template-rows: 2fr;
}
.container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    background-color: #F495B7;
    border-style: inset;
    border-color: #ef4880;
    border-width: 5px;
    box-sizing: border-box;
    width: 90%;
    text-align: left;
    padding: 5px;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow .2s ease-in-out;
    justify-self: end;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}
.container:hover {
    box-shadow: 0 0 15px 5px #F0164A;
}
.info {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F495B7;
    border-style: inset;
    border-color: #ef4880;
    border-width: 5px;
    box-sizing: border-box;
    width: 90%;
    text-align: left;
    padding: 5px;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow .2s ease-in-out;
    justify-self: end;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5px;
    display: none;
    animation-name: info;
    animation-duration: .3s;
    animation-fill-mode: forwards;
    position: relative;
    z-index: 1;
}
.info:hover {
   box-shadow: 0 0 15px 5px #F0164A; 
}
@keyframes info {
    0% {bottom: 100px;}
    100% {bottom: 0;}
}