/**
 * Flex grid
 */
.flex-grid-template {
    --grid-gap-x:30px;
    --grid-gap-y:30px;
    --grid-col:3;
    /* calculate new width */
    --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));
    --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));
    display:flex;
    flex-wrap:wrap;
    gap:var(--grid-gap-y) var(--grid-gap-x);
}

.flex-grid-template > * {
    width:calc(100% / var(--grid-col) - var(--grid-space-each));
}

@media only screen and (max-width:768px) {
    .flex-grid-template {
        --grid-col:2;
    }
}
@media only screen and (max-width:480px) {
    .flex-grid-template {
        --grid-col:1;
    }
}
/**
 * Background object fit
 */
.img-wrapper-cover > img {
    object-position:center center;
    height:100%;
    width:100%;
    min-height:100%;
    min-width:100%;
    max-height:100%;
    max-width:100%;
    display:block;
    object-fit:cover;
}

.img-wrapper-contain > img {
    object-position:center center;
    height:100%;
    width:100%;
    min-height:100%;
    min-width:100%;
    max-height:100%;
    max-width:100%;
    display:block;
    object-fit:contain;
}

/**
 * Clear list style
 */
ul.list-style-none,
.list-style-none ul {
    margin:0;
    list-style:none;
}

ul.list-style-none > li,
.list-style-none ul > li {
    padding:0;
}

/*
 * Visually hidden
 * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
 */
.visually-hidden {
    position:absolute;
    overflow:hidden;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
}