body {
    background-color: #6dcff6;
}
a {
    color: white;
}
.flexy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.flexy-panel {
    display: block;
    color: black;
    position: relative;
    box-sizing: border-box;
    width: 25%;
    height: 20vh;
    border-radius: 16px;/* 16px 0 0;*/
    background-color: white;
    padding: 8px;
    margin-bottom: -16px;
    border: 2px solid black;
    transition: all 0.5s;
    text-decoration: none;
}

.flexy-panel:hover {
    transform: scale(1.05, 1.05);
    z-index: 1;
}
.title {
    display: block;
    text-align: center;
    font-size: 1.2em;
}
.description {
    box-sizing: border-box;
    padding: 8px;
}

a[rel="external"]::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8klEQVQ4T4WTyQrCQBBEX9zA/Xs9CB4Fv9YNxZ0KU7EdJxoIyUz3vFRXdyreVw+4ATNgB3TTOqR8vc6qtDUALkAfuAIj4Ag4XoJM9SEljFOyIU5+ppcSxGqfDjq59KU2lYJcFdRhyTkB918FAxPgAHwoEEC1y8D8WgIb4BwOdYBHSqxLECCvcwXotqnqiNS5Q/atCMjNmwPboCCa3QqwIiuQ7OhPY36phLwkGbcPLXW8frYBlJ+3OK4bz0oA7dlldyWa/KHQgGHWKrteGosiQCAfsnFtMxUBPStYAwsgDsk/QD2NAtR/1Z8RjmGdUcka/f4LZGNLH/27DEUAAAAASUVORK5CYII=);
    position: relative;
    top: 3px;
    margin-right: 2px;
}

@media (max-width:801px)  {
    .flexy-panel {
        width: 50%;
        height: 30vh;
    }
}

@media (max-width:480px) {
    .flexy-panel {
        width: 100%;
        height: 50vh;
    }
}