:root {
    --hex-size: 220px;
    --hex-gap: 14px;
    --hex-border: 4px;
	--hex-offset-x: calc(var(--hex-size) / 2 + var(--hex-gap) / 2);
	--hex-overlap: -35px;
	--hex-shape: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
	--hex-border-color:#2ecc71;
    --hex-border-hover:#3498db;
}

.hexRow{
    display:flex;
    justify-content:left;
    gap:var(--hex-gap);
}

.hexRow.offset {    
	transform: translateX(var(--hex-offset-x));
}

.hexCard {
    position:relative;
    display:block;
    width:var(--hex-size);
    aspect-ratio:1;
    overflow:hidden;
	clip-path: var(--hex-shape);
    text-decoration:none;
    color:white;
	margin-top: var(--hex-overlap);	
}

.hexCard img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hexCard::before {
    content: "";
	z-index: 0;
    position: absolute;
    inset: 0;
    background:var(--hex-border-color);
    clip-path: var(--hex-shape);
}

.hexCard img, .hexCard .overlay {
    position: absolute;
    inset: 4px;
	z-index: 1;
    clip-path: var(--hex-shape);
}

.hexCard:hover::before {
    background:var(--hex-border-hover);
}

.overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;    
	background: linear-gradient(midnightblue, black);
	text-align: center;
    padding:20px;
}

.titleBehavior {
    font-family: Georgia, serif;
	background-image: linear-gradient(180deg, darkorange, maroon);
	background-size: 100%;
	background-repeat: repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
	filter: brightness(1.7);
	text-shadow: blue 8px 8px 35px;	
	font-weight: bold;
}

.statusDraft {
    color:#9aa0a6;
}

.statusPending {
    color:#ffb300;
}

.statusPublished {
    color:#2ecc71;
}

.statusRejected {
    color:#e74c3c;
}