:root{
    --gallery-gap: 1em;
    --items-per-row: 3;
    @media screen and (width <= 800px){
        --items-per-row:1;  
    }
}

#wrapper{
    display:flex;
    flex-direction: column;
    align-items:center;
    overflow: wrap;
}


body{
    font-size:1em;
    @media screen and (width >= 1920px){
       font-size:1.4em;
    }
    @media screen and (width >= 2560px){
        font-size:1.6em;
    }
    @media screen and (width <= 800px){
        text-align: center;  
    }
    letter-spacing:-0.03em;
    padding:1em;
    overflow-x:hidden;
}

iframe {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
}

#gallery{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0.5em 0;
    gap: 1em;
}

.gallery-item{
    flex: 0 0
    calc(
      100% / var(--items-per-row) - var(--gallery-gap) *
        (var(--items-per-row) - 1) / var(--items-per-row)
    );
}

.gallery-item > a > img{
    width:100%;
}