* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: arial;
}

html,
body {
  --cl-5:#555;
  --cl-7:#777;
  --cl-back:#171a1d;
  --gap:.75em;
  scroll-behavior: smooth;
  background-color:var(--cl-back);
  color: var(--cl-7);
}

main {
	display: flex;
	gap:var(--gap);
	align-items: start;
	flex-wrap: wrap;
	width:min(1400px,98%);
  margin: 2em auto;
  border: 1px solid var(--cl-5);
  padding-bottom: 2em;
}

.logo-top{
	width:min(4rem,50%);
  margin: var(--gap);
}

.header {
	flex-basis: 100px;
	flex-grow: 1;
	text-align: center;
}

.container {
	flex-basis: 500px;
	flex-grow: 99999999999;
  position: relative;
  display: flex;
  gap:var(--gap);
  padding: var(--gap);
}

/*-- columna --*/
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap:calc(var(--gap)*2.5);
}

.post {
  position: relative;
  overflow: hidden;
}

img {
  width: 100%;
  filter: grayscale(0%);
  border-radius: .5em;
}

.overlay {
  display: grid;
  gap: calc(var(--gap)/4);
  padding:var(--gap);
  letter-spacing: .1em;
  border-bottom: 1px solid var(--cl-5); 
}

h3{
  font-size: .8rem;
  text-transform: uppercase;
}

p{
  font-size: .6rem;
}

.footer{
  font-size: .9rem;
  text-align: right;
  letter-spacing: .2em;
  display: flex;
  gap: 2em;
  width: 100%;
	width:min(1400px,98%);
  margin: 2em auto 4em auto;
}

.footer a,
.footer a:active{
  color: var(--cl-7);
}