/* Generic styles  font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;*/
html {   scroll-behavior: smooth; font-family: 'Roboto', sans-serif; font-size:16px; background-color: #f9f7ef; line-height:1.15} 
a {text-decoration: none;}  /* d */
* a:hover {color: #a92315}
ul, li, figure { margin:0;padding:0; } /* d */
ol, ul { list-style: none;}
h1 {margin: 0px 20px 20px 20px; font-size: 28px;color: #869fcc; font-weight:500}
	.aukstyn {padding:8px 16px;line-height:1;background-color:#022d7c;font-size:26px;font-weight:500;color:white;position:fixed; bottom:10px;right:10px;}
/* layout */
.gheader { grid-area: header;}
.gmenu { grid-area: menu; border-top:3px solid #022d7c; 
         padding:10px 0; font-weight:bold;}
	.gmenu .meli {background-color: #869fcc;line-height:1.4; font-family: 'Roboto Condensed', sans-serif;}
	.gmenu .meli a {margin-right:5px; padding:3px 1vw; background-color: white; color:#022d7c;}
	.gmenu .meli .active {color:#a92315}
.gmain { grid-area: main; }
.gright { grid-area: right; text-align:right; font-size: 0.8rem; font-family: 'Roboto Condensed', sans-serif; font-weight:bold;}
	.gright .mel {float:right;display:block;width: 142px;margin-bottom:4px;background-color: #022d7c;line-height:1; font-family: 'Roboto Condensed', sans-serif;}
	.gright .mel a {margin-right:0; padding:4px 10px; background-color: white; color:#022d7c;}
.gfooter { grid-area: footer; background-color: #022d7c; color: #f9f7ef; padding:10px 20px;}
	.gfooter a {color: white} 
	.gfooter a:hover {color:#a92315}

.grid-container {
    display: grid;
    grid-template-areas:
        'header header header right right right'
        'menu menu menu menu menu menu'
        'main main main main main main'
        'footer footer footer footer footer footer';
    grid-gap: 10px;
    background-color: #f9f7ef;
    padding: 10px;
    grid-template-columns: repeat(auto-fit, minmax(55px, 1fr)); /* 80 */
}

.grid-container > div { }

/* metugalleries styles */
/* https://codepen.io/imjuangarcia/pen/pGgmbe */

.metugalleries { padding: 0rem; }

.metugalleries > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    grid-gap: 1rem;
    list-style-type:none; /* d */
}

.metugalleries > ul > li { border: 1px solid #E2E2E2; background-color: white;}

.metugalleries > ul > li > figure {
    max-height: 220px; 
    overflow: hidden;
    position: relative; 
}

.metugalleries > ul > li > figure  img { width: 100%; }

/*.metugalleries > ul > li > figure > figcaption { position: absoliute; bottom: 0; background-color: rgba(0,0,0,.3); width: 100%; }*/
/*.metugalleries > ul > li > figure > figcaption > p { color: white; padding: 0 20px; margin:0; font-size: 0.8rem;}*/

.metugalleries > ul > li > p { font-size: 1rem; line-height: 1.4; padding: 2px 15px 6px 20px; margin-top:10px;}
.metugalleries  b {font-weight:500}
.metugalleries > ul > li > p.metrika { margin-top:0;padding:6px 20px;background-color: #eee;color:#022d7c;font-size:0.8rem;} 
.metugalleries > ul > li > p.metrika.metai {font-weight:bold;font-size: 1.2rem}

/* trecio lygio BASIC  saltinis: https://css-tricks.com/adaptive-photo-layout-with-flexbox/ >>> https://codepen.io/maxvoltar/pen/eYOPdMG  */
.alb_pav {font-weight: 500; font-size: 24px;}
.alb_autoriai {margin:20px}

.albumas ul {
    display: flex;
    flex-wrap: wrap;
}

.albumas ul li {
    height: 36vh; /* 40 */
    flex-grow: 1;
    padding:0 6px 6px 0;
}

.albumas li:last-child {
    /* There's no science in using "10" here. In all my testing, this delivered the best results.*/
    flex-grow: 10;
}

.albumas ul li img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

/* ADVANCED */
/* Portrait */

@media (max-aspect-ratio: 1/1) {
   .albumas ul li {
        height: 50vh; /* 30 */
    }
}

/* Short screens */

@media (max-height: 480px) { /* 480 */
    .albumas ul li {
        height: 80vh;
    }
}

/* Smaller screens in portrait */

@media (max-aspect-ratio: 1/1) and (max-width: 780px) { /* 480 */
    .albumas ul {
        flex-direction: row;
    }

    .albumas ul li {
        height: auto;
        width: 100%;
    }
    .albumas ul li img {
        width: 100%;
        max-height: 75vh;
        min-width: 0;
    }
}