body {
    font-family: 'Arial', sans-serif;
    background-color: black !important;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
    background-image: none;
}

.container {
    text-align: center;
    height: 1400px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "one one two three four four"
        "five five six six seven seven"
        "eight eight nine ten eleven eleven"
        "eight eight twelve twelve eleven eleven";
    margin: 0;
    padding: 0;
    gap: 0;
}

.tile, .tile-text {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.tile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.tile-text p {
    margin: 0;
    color: #666;
    position: absolute;
    top: 35%;
    text-align: center;
    z-index: 999;
    color: white;
}

.image-one { grid-area: one; }
.image-two { grid-area: two; }
.image-three { grid-area: three; }
.image-four { grid-area: four; }
.image-five { grid-area: five; }
.image-six { grid-area: six; position: relative; }
.image-seven { grid-area: seven; }
.image-eight { grid-area: eight; }
.image-nine { grid-area: nine; }
.image-ten { grid-area: ten; }
.image-eleven { grid-area: eleven; }
.image-twelve { grid-area: twelve; }
.image-thirteen { grid-area: thirteen; }

@media (max-width: 830px) {
    .tiles-grid {
        grid-template-areas:
            "one one one one two two"
            "nine nine nine three three three"
            "six six six six six six"
            "seven seven seven eight eight eight"
            "four four thirteen thirteen ten ten"
            "four four eleven eleven ten ten"
            "twelve twelve twelve twelve twelve twelve";
    }
    .tile.image-one {
        height: 190px !important;
        background-position: bottom !important;
    }
    .tile.image-two {
        height: 190px !important;
    }
    .tile.image-nine { bottom: 0 !important;
        height: 158px !important;
     }
     .tile.image-three {
        height: 158px !important;
        background-position: bottom !important;
     }
     .tile.image-six {
        height: 200px !important;
     }
     .tile.image-seven {
        height: 120px !important;
     }
    .tile.image-eight { height: 120px !important; }
    .tile.image-five { height: 200px !important; }
    .tile.image-thirteen { height: 105px !important; }
    .tile.image-eleven { height: 105px !important; }
    .tile.image-four { height: 210px !important; }
    .tile.image-ten { height: 210px !important; bottom: 0 !important; }
    .container{
        height: 1060px;
    }
    .tile-text p{
        top: 40%;
        line-height: 40px;
    }
    img.loading{
        visibility: hidden;
    }
}

/* @media (max-width: 480px) {
    .tiles-grid {
        grid-template-areas:
            "one"
            "two"
            "three"
            "four"
            "five"
            "six"
            "seven"
            "eight"
            "nine"
            "ten"
            "eleven"
            "twelve";
    }
} */

.tile.tile-text.image-six img.loading,
.tile.tile-text.image-six img.logo {
    position: sticky;
    top: 20px;
    height: auto;
    max-width: 150px;
}

.tile.image-one {
    height: 300px;
    border: 1px solid black;
    background: url('../images/image1.png') center/cover no-repeat;
}
.tile.image-two {
    height: 300px;
    border: 1px solid black;
    background: url('../images/image2.png') center/cover no-repeat;
}
.tile.image-three {
    height: 300px;
    border: 1px solid black;
    background: url('../images/image3.png') center/cover no-repeat;
}
.tile.image-four {
    height: 300px;
    border: 1px solid black;
    background: url('../images/image4.png') center/cover no-repeat;
}
.tile.image-five {
    height: 280px;
    border: 1px solid black;
    background: url('../images/image5.png') right/cover no-repeat;
}
.tile.image-six {
    height: 240px;
    border: 1px solid black;
    background: url('../images/image6.png') center/cover no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tile.image-seven {
    height: 280px;
    border: 1px solid black;
    background: url('../images/image7.png') center/cover no-repeat;
}
.tile.image-eight {
    height: 355px;
    border: 1px solid black;
    background: url('../images/image8.png') right/cover no-repeat;
}
.tile.image-nine {
    height: 280px;
    border: 1px solid black;
    background: url('../images/image9.png') center/cover no-repeat;
    bottom: 10%;
    position: relative;
}
.tile.image-ten {
    height: 280px;
    border: 1px solid black;
    background: url('../images/image10.png') center/cover no-repeat;
    bottom: 10%;
    position: relative;
}
.tile.image-eleven {
    height: 355px;
    border: 1px solid black;
    background: url('../images/image11.png') center/cover no-repeat;
}
.tile.image-twelve {
    bottom: 35%;
    border: 1px solid black;
    position: relative;
    background-color: black;
}
.tile.image-thirteen {
    height: 280px;
    border: 1px solid black;
    background: url('../images/image13.jpg') center/cover no-repeat;
}
.tile.image-twelve p {
    color: white;
}

img.loading {
    position: relative;
}

.sp-el-col {
    padding: 0px !important;
}

.sp-el-block {
    padding: 0px !important;
}

.sp-el-section {
    padding: 0px !important;
}

.sp-el-row {
    padding: 0px !important;
}   

*,::before,::after {
    box-sizing: content-box;
}