.galeria {
    width: min(100%, 120rem);
    margin: 0 auto;
    background-color: var(--bg1);
    text-align: center;
    padding: 1rem 0;
    border-radius: 1rem;

    .boton {
        color: var(--bg1);
        background-color: var(--sec);
        border: none;
        padding: 1rem 2rem;
        margin-bottom: 1rem;
        border-radius: .75rem;
        &:hover {
            background-color: var(--pri);
            cursor: pointer;
        }
    }

    .opciones {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem 1rem;
        input { width: 12rem; }

        .columnas {
            display: flex;
            gap: 1rem;
        }

        svg {
            display: block;
            color: var(--sec);
            &:hover {
                color: var(--pri);
                cursor: pointer;
            }
        }

        .buscar {
            display: flex;
            align-items: center;
            label {
                color: var(--bg1);
                background-color: var(--sec);
                padding: 1rem;
                border-top-left-radius: .75rem;
                border-bottom-left-radius: .75rem;
                &:hover {
                    background-color: var(--pri);
                    cursor: pointer;
                }
            }
            input {
                padding: 1rem;
                background-image: url('../img/buscar.svg');
                background-repeat: no-repeat;
                background-position: right;
                border: none;
                border-top-right-radius: .75rem;
                border-bottom-right-radius: .75rem;
                &::placeholder { color: var(--gre); }
            }
        }
    }

    .grid {
        display: grid;
        gap: .6rem;
        @media (width > 768px) { grid-template-columns: repeat(2, 1fr); }  
        @media (width > 1024px) {
            grid-template-columns: repeat(3, 1fr);
            gap: .3rem;
        }
    }
    .column1 { grid-template-columns: repeat(1, 1fr); }
    .column2 { grid-template-columns: repeat(2, 1fr); }
    .column3 {
        grid-template-columns: repeat(3, 1fr);
        gap: .3rem;
    }
    img {
        border-radius: 1rem;
    }

    .imagen {
        transition: 500ms transform ease;
        @media (width > 1024px) {
            &:hover {
                transform: scale(1.5);
            }
        }
        cursor: pointer;
    }

    .texto {
        color: var(--sec);
        text-align: center;
        margin: 0;
    }
}

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(50, 50, 50, .5);
    backdrop-filter: blur(.75rem);
    img {
        width: min(100%, 80rem);
    }
    p {
        color: var(--pri);
        background-color: var(--bg2);
        font-size: 2rem;
        font-weight: bold;
        padding: .5rem 1rem;
        margin: 0;
        border-end-end-radius: 1rem;
        border-end-start-radius: 1rem;
    }

    .info {
        display: flex;
        justify-content: space-between;
        width: min(100%, 80rem);
    }

    .likes {
        font-size: 2rem;
        font-weight: bold;
        color: var(--pri);

        background-color: transparent;

        &::before {
            content: 'like';
            color: transparent;

            background-image: url('../img/like.svg');
            background-repeat: no-repeat;
            background-position: center;

        }
        &.likey {
            &::before { background-image: url('../img/likey.svg'); }
        }
    }

    .fecha {
        background-color: transparent;
        font-size: 1.5rem;
    }

    .admin {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
        a {
            color: var(--whi);
            padding: .7rem;
            border-radius: 1rem;
        }
        .borrar { background-color: var(--red) }
        .editar { background-color: var(--sec) }
    }
}
@media (pointer: coarse) { /* Para pantallas táctil */ }

.paginacion {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: min(100%, 50rem);
    margin: 1rem auto;
    .actual {
        color: var(--pri);
        font-weight: bold;
        padding: 1rem;
    }
    .url {
        color: var(--sec);
        padding: 1rem;
        transition: 300ms all ease;
        &:hover { scale: 1.25; }
    }
}