/* layout */
.page-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}
figure{
    background: var(--bckgr);
}
.widen-wrap,
.figure-nowide{
    flex-basis: 250px;
    flex-grow: 1;
    min-width: 20%;
    height: fit-content;
    max-width: 400px;
}
.figure-small,
.figure-nowide{
    transition: 500ms;
    height: fit-content;
    padding: 3ex 3ex 0 3ex;
}
.figure-small{width:100%;}
.figure-small:hover,
.figure-nowide:hover{
    transform: scale(1.15);
    box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
    z-index: 20;
    position: relative;
}
.media{
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    object-fit: cover;
    object-position: center;
}
a.media:hover{
    transform: scale(1);
}
.big-text .media{
    transition: 500ms;
    margin: 0 auto;
    display: flex;
}
.big-text:hover .media{
    width: 50%;
}
.media__edges{
    border: 3px solid var(--teal-white);
    border-left: none;
    border-right: none;
}
.full-img{
    width: 100%;
    object-fit: cover;
}
html body .full-img{
    object-fit: contain;
}
.placeholder{
    display: none;
}

.sprite-box{
    position: relative;
    z-index: 2;
    width: calc(100% + 6ex);
    margin-left: -3ex;
    padding: 1ex 1ex 1.3ex 1ex;
    background: inherit;
}
.sprite-box__a{
    display:block;
}
.sprite-box__a:hover{
    transform: none;
}
.flsc{
    cursor: pointer;
    width: 10%;
    height: 3ex;
    margin: 0 auto;
    display: block;;
    transition: 800ms;
}
.flsc:hover{
    scale: 3;
}
.flsc:active{
    scale: 2.5;
    transition: 0s;
}
.figcaption{
    margin-top: -1px;
    max-height: 0em;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: 0px solid var(--teal);
    background: var(--bckgr);
    font-size: 90%;
    padding: 0 3ex;
    min-width: calc(100% - 6ex);
}
figure:hover .figcaption{
    height: fit-content;
    max-height: 30em;
    padding: 0 3ex 3ex 3ex;
    transition: max-height 2s;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
}

                                         /* open media */
@keyframes opacity-show{
    from{opacity:0}
    to{opacity:1}
}
.figure-wide{
    position:absolute;
    top: 2.5vh;
    left: 0;
    width: 100%;
    height: 95vh;
    animation: opacity-show 600ms 1;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(51,102,136,.4);
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(3px);
}
.figure__fill{
    background: var(--bckgr);
}
.figure-small .shrink-figure{display: none;}
.figure-wide .shrink-figure{
    display: flex;
}
.figure-wide .media{
    height: 100%;
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 4ex;
}
.figure-wide .sprite-box,
.figure-wide figcaption{display:none}
.btn-close{
    cursor: pointer;
    position: absolute;
    top: -1.2vw;
    right: -1.2vw;
    background: var(--teal);
    font-weight: 900;
    color: white;
    font-size: 150%;
    border-radius: 50%;
    opacity: 0.5;
    height: 3ex;
    width: 3ex;
    display: flex;
    place-content: center;
    transition: 500ms;
  }
  .btn-close:hover{opacity: .9}
  .btn-close:active{opacity: 0.1}













                                         /* pages  */
.fav-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}
.figure-opened .fav-wrap{
    padding: 5ex;
}
.flex{
    display: flex;
    justify-content: space-between;
    gap: 1ex;
}
.flex1{height: 30%}
.flex2{height: 22%}
.flex3{height: 20%}

.flex svg{height:100%; width:100%}
.flex>div{height:100%;}

.figure-opened .flex1 svg{
    width: 19%;
}
.fav2-wrap{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
}
.fav2-wrap img,
.placeholder2{
    width: 21%;
    flex-grow: 1;
    margin: 2%;
}
.fav2-wrap img{
    height: 26%;
    object-fit: contain;
    cursor: pointer;
}
.placeholder2{
    height:0;
    margin: 0 2%;
}
                                         /* media  */
@media(max-width:500px){
}
@media(min-width:500px){
    .widen-wrap, .figure-nowide{
        margin: 3ex;
    }    
    .placeholder{
        display: block;
        flex-basis: 250px;
        flex-grow: 1;
        margin: 0 3ex;
        height: 0;
    }
    .animate-p{
        margin: 0 3ex;
    }
}
@media(max-width:999px){
    .page-content{
        margin-top:  -3ex;
    }
}
@media(min-width:1000px){
    .page-content{
        margin-top: calc(-2vw - 2ex - 3ex);
    }
}