html{
padding:20px;
}

html *{
/*border: 1px solid red;*/
}

body{
margin:0;
background-color:black;
color:white;
font-family: "Figtree", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}

.header{
background-color:black;
overflow:auto;
line-height:40px;
display:flex;
align-items: center;
padding-bottom:1em;
}

.header>*{
margin:0;
}

.header .logo{
float:left;
text-transform:uppercase;
white-space:nowrap;
}

.header-right{
float:right;
margin-left:16px;
}

.push{
margin-left:auto;
}

.button{
padding: 4px 20px 4px 20px;
border: 2px solid white;
border-radius: 16px;
transition:0.1s;
}

.button:hover{
border-color:gray;
transition:0.15s;
}

@media only screen and (max-width:700px){
.header{
display:block;
}

.header p{
margin:0;
float:none;
position:relative;
line-height:20px;
}

.header .logo{
float:none;
}

.socials{
position:absolute;
top:0;
right:0;
padding:20px;
}
}

@media only screen and (max-width:515px){
.socials{
position:relative;
display:block;
float:none;
margin:10px 0 10px 0;
padding:0;
}

.socials .button{
display:block;
line-height:24px;
border-radius:20px;
margin-bottom:10px;
text-align:center;
}

}

a{
text-decoration:none;
color:white;
}

.main{
display:block;
}

/*   GALERIA   */

.container{
max-width:100rem;
/*margin-inline:auto;
padding-inline:2rem;*/
}

.gallery{
position:relative;
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:12px;
}

@media only screen and (max-width:850px){
.gallery{
grid-template-columns: 1fr;
}
}

.card{
/*border:3px solid hotpink;
padding:8px;*/
overflow:auto;
}

.card-img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
opacity:0.7;
transition-duration: 0.1s;
}

@media only screen and (max-width:1050px){
.card-img{
aspect-ratio:4/3;
}
}


.card a{
position:relative;
}

.card a:hover img{
opacity:1;
transition:opacity 0.15s ease-in-out;
}

.card h2{
margin:0;
font-weight:400;
text-transform:uppercase;
font-size:1.5rem;
position:absolute;
bottom:0;
left:0;
padding:0.5em;
}