.grid {
    display: grid;
    width: 100%;
    gap:1%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
}

.grid-2 {
    display: grid;
    width: 100%;
    gap:10%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
}

.grid-8 {
    display: grid;
    width: 100%;
    gap:1%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

figcaption > h5 {
    margin: 0.5rem 0;
}

figure > h6 {
    min-height: 5rem;
    padding: 1.5rem 0;
    cursor: pointer;
}

.span1 {
    grid-column: span 1;
}

.span2 {
    grid-column: span 2;
}

.span3 {
    grid-column: span 3;
}

.span4 {
    grid-column: span 4;
}

.span6 {
    grid-column: span 6;
}

.space-around {
    display:flex;
    justify-content: space-around;
}

.space-between {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}