.infobox-grid {
    display:flex;
}
.infobox-grid a {
    display:block;
}
.infobox {
    position:relative;
    overflow:hidden;
    -moz-transition: all 0.3s, ease-in-out 0.2s; -webkit-transition: all 0.3s, ease-in-out 0.2s; -o-transition: all 0.3s, ease-in-out 0.2s; transition: all 0.3s, ease-in-out 0.2s;
}
.infobox .image_container {
    position:relative;
    overflow:hidden;
}
.infobox .image_container img {
    width:100%;
    bottom:0;
    left:0;
    right:0;
    top:0;
    position:relative;
}

.infobox .head h4 {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin:0;
    padding:1rem;
    background-color: rgba(255,255,255, 0.9);
    font-weight:normal;
    color: var(--col01);
    text-transform:none;
    -moz-transition: all 0.3s, ease-in-out 0.2s; -webkit-transition: all 0.3s, ease-in-out 0.2s; -o-transition: all 0.3s, ease-in-out 0.2s; transition: all 0.3s, ease-in-out 0.2s;
}

.infobox .longtext {
    width:100%;
    height:100%;
    bottom:0;
    top:auto;
    position:absolute;
    margin:0;
    padding:1rem;
    background-color: var(--ci001);
    font-size: var(--font_size03);
    color: var(--col15);
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}
.infobox:hover .longtext {
    opacity: 1;
    transform: translateX(0px);
    transition: transform 0.4s, opacity 0.1s;
}
.infobox .longtext h4 {
    color: var(--col15);
}
.infobox .longtext p {
    margin-bottom:0;
    padding-bottom:.75rem;
    font-size: var(--font_size03);
    font-weight:normal;
    color: var(--col15);
}