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

body{
    background:#000;
    color:#fff;
    font-family: Helvetica, Arial, sans-serif;
    min-height:100vh;
}

header{
    text-align:center;
    padding:60px 20px 70px;
}

h1{
    font-size:clamp(2.5rem,6vw,5rem);
    font-weight:250;
    letter-spacing:0.05em;
    margin-bottom:10px;
    font-family: 'Boldonse', sans-serif;
}

h2{
    font-size:clamp(1rem,2vw,1.4rem);
    font-weight:200;
    color:rgb(255, 255, 255);
    font-family: 'Boldonse', sans-serif;
}

.masonry-grid{
    columns:4 300px;
    column-gap:18px;
    padding:0 30px 40px;
}

.item{
    break-inside:avoid;
    margin-bottom:18px;
    overflow:hidden;
    border-radius:14px;
    background:#111;
}

.item video{
    width:100%;
    display:block;
    object-fit:cover;
}

/* proporzioni */

.portrait video{
    aspect-ratio:3/4;
}

.landscape video{
    aspect-ratio:4/3;
}

/* Hover elegante */

.item{
    transition:transform .4s ease,
               opacity .4s ease;
}

.item:hover{
    transform:translateY(-4px);
}

/* Tablet */

@media (max-width:1000px){

    .masonry-grid{
        columns:3 250px;
    }

}

/* Smartphone */

@media (max-width:700px){

    .masonry-grid{
        columns:2 180px;
        padding:0 15px 30px;
        column-gap:12px;
    }

    .item{
        margin-bottom:12px;
    }

}

/* Smartphone piccolo */

@media (max-width:500px){

    .masonry-grid{
        columns:1;
    }

}