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

body{
    margin: 0;
    background: black;
}

.gallery-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    width: auto;
    max-height: 100dvh;
    margin: 0; 
    gap: 0.2rem;
       
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0; 
    padding: 0;
    color: white;
    font-size: 0.65rem;
}


#mythological  { grid-column: 1; grid-row: 1;}
#gods          { grid-column: 4; grid-row: 1;}
#zodiac        { grid-column: 1; grid-row: 6;}
#signs         { grid-column: 4; grid-row: 6;}

#aries   { grid-column: 2; grid-row: 1;}
#taurus  { grid-column: 3; grid-row: 1;}

#gemini  { grid-column: 4; grid-row: 2;}
#cancer  { grid-column: 4; grid-row: 3;}
#leo     { grid-column: 4; grid-row: 4;}
#virgo   { grid-column: 4; grid-row: 5;}

#libra   { grid-column: 3; grid-row: 6;}
#scorpio { grid-column: 2; grid-row: 6;}

#sagittarius { grid-column: 1; grid-row: 5;}
#capricorn   { grid-column: 1; grid-row: 4;}
#aquarius    { grid-column: 1; grid-row: 3;}
#pisces      { grid-column: 1; grid-row: 2;}

.item {
    display: flex;
    align-items: center;
    border: 0.1rem solid whitesmoke;
    cursor: pointer; 
}

.item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}   

.fullscreen-container  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    grid-column: 2 / 4;
    grid-row: 2 / 6;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.welcome-message {
    color: white;
    font-size: 2rem;
    text-align: center;
}

span    {
    color: gold;
}


.fullScreen-image   {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}



@media (orientation: landscape){
    .gallery-grid {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(4, 1fr);
        max-height: 100dvh;
        padding: 0.5rem 0.5rem 0.5rem;
    }

    #mythological { grid-column: 1; grid-row: 1; }
    #zodiac       { grid-column: 8; grid-row: 1; }
   
    #aries    { grid-column: 1; grid-row: 4; }
    #taurus   { grid-column: 1; grid-row: 3; }
    #gemini   { grid-column: 1; grid-row: 2; }

    #cancer   { grid-column: 2; grid-row: 1; }
    #leo      { grid-column: 3; grid-row: 1; }
    #virgo    { grid-column: 4; grid-row: 1; }
    #libra       { grid-column: 5; grid-row: 1; }
    #scorpio     { grid-column: 6; grid-row: 1; }
    #sagittarius { grid-column: 7; grid-row: 1; }

    #capricorn   { grid-column: 8; grid-row: 2; }
    #aquarius    { grid-column: 8; grid-row: 3; }
    #pisces      { grid-column: 8; grid-row: 4; }

    .fullscreen-container {
        grid-column: 2 / 8;
        grid-row: 2 / 5;
    }
}