/* TŁO STRONY */
/* TŁO STRONY */
body{
    margin:0;
    min-height:100vh;
    background:black;
    background-image:url('http://trotuary.pl/images/bkg2.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:white;
    font-family:'Cinzel', serif;
}

/* LOGO */
.hero{
    display:flex;
    justify-content:center;

    margin-top:60px;
}

.logo{
    width:420px;
    max-width:90%;
}

.banerek{
    width:700px;
    max-width:100%;
}

/* GRID */
.menu-grid{
    width:90%;
max-width:500px;

    margin:50px auto;

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

    gap:20px;
}

/* KAFLE */
.tile{
    aspect-ratio:1 / 1;

    display:flex;

    justify-content:flex-end;
    align-items:flex-end;

    padding:24px;

    border:2px solid rgba(255,255,255,0.5);

    box-sizing:border-box;

    color:white;
    text-decoration:none;

    font-size: clamp(14px, 2vw, 20px);

    text-transform:lowercase;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

/* HOVER */
.tile:hover{
    background-color:rgba(255,255,255,0.15);

    border-color:white;

    transform:scale(1.02);

    cursor:pointer;
}

/* USUNIĘCIE STYLÓW LINKÓW */
.tile:visited,
.tile:active,
.tile:hover,
.tile:focus{
    color:white;
    text-decoration:none;
}

@media (max-width: 600px){

    .menu-grid{
        grid-template-columns:1fr;
        width:90%;
    }

    .tile{
        aspect-ratio: 1 / 1;
        font-size:20px;
    }

    .hero .logo{
        width:80%;
    }
}


/* SOCIALS */
.socials{
    display:flex;
    justify-content:center;
    gap:18px;

    margin-top:20px;
    margin-bottom:10px;
}

.icon{
    width:35px;
    height:35px;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0.85;

    transition:0.3s ease;
}

.icon svg{
    width:100%;
    height:100%;

    fill:white;
}

.icon:hover{
    opacity:1;
    transform:scale(1.15);
}


.videos-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 60%;
    max-width: 1100px;
    margin: 20px auto;
}

.video-container {
    flex: 1;
    min-width: 0;
    aspect-ratio: 16 / 9;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* Telefony */
@media (max-width: 600px) {
    .videos-row {
        flex-direction: column;
        width: 90%;
    }

    .video-container {
        width: 100%;
        flex: none;
    }
}


/* LOGO */
.hero{
    display:flex;
    justify-content:center;

    margin-top:60px;
}

.logo{
    width:420px;
    max-width:90%;
}

.banerek{
    width:700px;
    max-width:100%;
}

/* GRID */
.menu-grid{
    width:90%;
max-width:500px;

    margin:50px auto;

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

    gap:20px;
}

/* KAFLE */
.tile{
    aspect-ratio:1 / 1;

    display:flex;

    justify-content:flex-end;
    align-items:flex-end;

    padding:24px;

    border:2px solid rgba(255,255,255,0.5);

    box-sizing:border-box;

    color:white;
    text-decoration:none;

    font-size: clamp(14px, 2vw, 20px);

    text-transform:lowercase;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

/* HOVER */
.tile:hover{
    background-color:rgba(255,255,255,0.15);

    border-color:white;

    transform:scale(1.02);

    cursor:pointer;
}

/* USUNIĘCIE STYLÓW LINKÓW */
.tile:visited,
.tile:active,
.tile:hover,
.tile:focus{
    color:white;
    text-decoration:none;
}

@media (max-width: 600px){

    .menu-grid{
        grid-template-columns:1fr;
        width:90%;
    }

    .tile{
        aspect-ratio: 1 / 1;
        font-size:20px;
    }

    .hero .logo{
        width:80%;
    }
}


/* SOCIALS */
.socials{
    display:flex;
    justify-content:center;
    gap:18px;

    margin-top:20px;
    margin-bottom:10px;
}

.icon{
    width:35px;
    height:35px;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0.85;

    transition:0.3s ease;
}

.icon svg{
    width:100%;
    height:100%;

    fill:white;
}

.icon:hover{
    opacity:1;
    transform:scale(1.15);
}


.videos-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    width: 60%;
    max-width: 900px;
    margin: 40px auto;
}

.video-container {
    flex: 1;
    min-width: 0;
    aspect-ratio: 16 / 9;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* Telefony */
@media (max-width: 600px) {
    .videos-row {
        flex-direction: column;
        width: 90%;
    }

    .video-container {
        width: 100%;
        flex: none;
    }
}