@import "portrait-sml.css" screen and (max-width:640px);
@import "landscape-lrg.css" screen and (min-width:640px);

.overlay {
    display: none;
    position: fixed;
    z-index: 9900;
    grid-template-rows: min-content auto;
    left: 0;
    width: 100%;
    text-align: center;    
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.toggle-overlay:checked~.overlay {
    display: grid;
}

.overlay-close {
    display: inline-grid;
    grid-template-columns: 1.5em auto;
    gap: var(--padding-sml);
    align-items: center;
    align-self: center;
    justify-content: center;
    padding: var(--padding-sml)!important;
    margin: var(--padding-sml) 0 0 0!important;
    font-size: var(--font-size-med)!important;
    color: var(--color-7);
    background: #FFFFFF;
    background-color: #FFFFFF;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-sml);
    box-shadow: var(--shadow-button);
}

.overlay-close .icon{
    width: 1.5em;
    height: 1.5em;
}