.tile-container {
    display: flex;
    justify-content: center;    
    gap: 0px;
    background-image: url('../img/tile-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
}

.tile-container-text {
    display: flex;
    justify-content: center;    
    gap: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
}


.tile {
    width:300px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: skew(-20deg);
}

.tile-text {
    width:300px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title{
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 110px;
    padding: 10px 10px 10px 10px;
    margin: 5px 5px 5px 67px;
    background-color: rgb(0,0,0,0.6);
    border: none;
    
}

.text{
    transform: skew(20deg);
    color: rgb(255,255,255);
}

.tile img {
    display: block;
    width:360px;
    overflow: hidden;
    
}

.tile:hover {
    transform: scale(1.1) skew(-20deg);
    object-fit: cover;
}

@media only screen and (max-width: 750px) 
{
    [class*="container"] {
        align-items: center;
        flex-wrap: wrap;
        width:100%;
        overflow: hidden;
    }

    [class*="tile"] {
        height: auto;
        transform: skew(-10deg);
        overflow: hidden;
    }

    .text{
        transform: skew(0deg);
        color: rgb(255,255,255);
    }

    .tile-container {
        display: flex;
        justify-content: center;    
        gap: 0px;
        background-size: cover;
        background-position: center;
        height: auto;
        transform: skew(0deg);
    }
    
    .tile:hover {
        transform: scale(1.1) skew(-10deg);
        
    }
    
    
}