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

body{

    background:#f6f1ef;
    background-image: url("https://i.pinimg.com/736x/87/53/c1/8753c1d4fe43ae2240b0a45765dd9376.jpg");
    background-size: 360px 250px;
    color:#8f7d7d;

    font-family:'IBM Plex Mono', monospace;

    padding:70px;
}

.wrapper{

    max-width:1000px;

    margin:auto;
}

.header{

    margin-bottom:45px;
}

h1{

    font-family:'Cormorant Garamond', serif;

    font-weight:400;

    font-size:58px;

    color:#826969;

    margin-bottom:8px;
}

.header p{

    font-size:11px;

    color:#1c1103;

    letter-spacing:1px;

    opacity:0.7;
}

.grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:14px;
}

.box{

    background:#f1e9e7;

    border:1px solid #ddd0cd;

    padding:20px;

    transition:0.25s;

    position:relative;

    overflow:hidden;
}

.box:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 20px rgba(0,0,0,0.04);
}

.box span{

    display:block;

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:16px;

    color:#b19797;
}

.box p,
.box li{

    font-size:12px;

    line-height:1.9;

    list-style:none;
}

/* SIZES */

.large{

    grid-column:span 3;

    min-height:240px;
}

.medium{

    grid-column:span 2;

    min-height:190px;
}

.small{

    grid-column:span 2;

    min-height:160px;
}

.wide{

    grid-column:span 4;
}

.tiny{

    grid-column:span 2;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* TAGS */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.tags a{

    text-decoration:none;

    color:#8fa5a0;

    border-bottom:1px solid transparent;

    font-size:11px;

    transition:0.2s;
}

.tags a:hover{

    border-color:#8fa5a0;
}

/* HOVER IMAGE */

.hover-image img{

    position:absolute;

    width:310px;

    bottom:-10px;
    right:-10px;

    opacity:0;

    transition:0.4s;

    filter:grayscale(10%);
}

.hover-image:hover img{

    opacity:0.18;
}

/* SECRET */

.secret button{

    background:none;

    border:none;

    font-family:inherit;

    font-size:11px;

    color:#8fa5a0;

    cursor:pointer;

    margin-bottom:12px;
}

#hidden{

    opacity:0;

    transition:0.4s;
}

.back{

    position:fixed;

    bottom:20px;
    left:25px;

    text-decoration:none;

    font-size:11px;

    color:#b19797;

    opacity:0.7;

    transition:0.2s;
}

.back:hover{

    opacity:1;

    letter-spacing:1px;
}

.nav{

    display:flex;

    gap:18px;

    margin-bottom:45px;
}

.nav a{

    text-decoration:none;

    font-size:10px;

    color:#a28d8d;

    transition:0.2s;
}

.nav a:hover{

    opacity:0.6;
}