.grid
{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
    padding: 10px;
}

.albums .grid
{
    grid-template-columns: repeat(1, 1fr);
}

.recent-singles .grid
{
    grid-template-columns: repeat(2, 1fr);
}

.pictures .grid
{
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,1fr);
}

.grid-items
{
    width: 100%;
    height: 100%;
    position: relative;
}

.grid-items .grid-content
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-container img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*Centers the image instead of position top-left*/
    object-position: 50% 50%;
    cursor: pointer;
    transition: .5s ease-in-out;
    border-radius: 5px;
}

.songs .grid-items:hover .grid-content img
{
    transform: scale(1.5);
}

.pictures .grid img
{
    border-radius: 50%;
}

.grid-items .text
{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /*makes the text centered*/
    transform: translate(-50%,-50%);
    color:#fff;
    font-size: 25px;
    pointer-events: none;
    z-index: 4;
    transition: .3s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    backdrop-filter: blur(5px) saturate(1.8);
    text-align: center;
    margin: 8px;
}

.grid-items:hover .text
{
    opacity: 1;
    animation: move-down .3s linear;
    padding: 1em;
    width: 100%;
}

/*Adding animation to text*/
@keyframes move-down
{
    0%
    {
        top:10%;
    }
    50%
    {
        top:25%;
    }
    100%
    {
        top:50%;
    }
}

.grid .grid-container
{
    text-align: center;
}

.grid .grid-items .btn
{
    background-color: #ffffff;
    border: none;
    color: #526840bf;
    text-decoration: none;
    font-size: 0.875rem;
    padding: 15px 28px;
    border-radius: 5px;   
    border: solid 1px yellow;
    position: absolute;
    top: 25%;
    left: 0%;
    margin: 8px;
}

.w-2
{
    grid-column: span 2;
}

.w-3
{
    grid-column: span 3;
}

.h-2
{
    grid-row: span 2;
}

.h-3
{
    grid-row: span 3;;
}

.h-4
{
    grid-row: span 4;
}

.album-gallery
{
    padding-bottom: 50px;
}


/*
#merch-gallery .grid-items:hover .text
{
    opacity: 1;
    animation: move-down .3s linear;
    padding: 1em;
    width: 100%;
}
*/

/*
.grid-items:hover .image img
{
    transform: scale(1.5);
}
*/