.blur-detector {
    transition: filter 0.2s;
}

.links-grid-container {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0.5vw;
    width:340px;
    margin: auto;
    gap: 44px;
    margin-bottom: -20px;
    
    & a img {
        width:100%;
    }
}

#youtube, #tiktok, #gmail {
    background-color: var(--dark-color);
    transition: background-color 0.1s;
}

#youtube:hover {
    background-color: deeppink;
}

#tiktok:hover {
    background-color: rebeccapurple;
}

#gmail:hover {
    background-color: orangered;
}

.content-grid-container {
    display: grid;
    margin:0;
    overflow:visible;
}

@media (orientation:landscape) {
    .content-grid-container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .content-grid-container a img:hover {
        transform:scale(1.1);
        position: relative;
        z-index: 2;
    }
    .blur-detector:not(:hover) {
        filter: blur(1px);
    }
}

@media (orientation:portrait) {
    .content-grid-container {
        grid-template-columns: 1fr;
    }
}

.content-grid-container a img {
    width:100%;
    transition: transform 0.05s;
    position: relative;
    z-index: 1;
}