.tile-header-group-container {
    display: flex;
    flex-direction: column;

}

.tile-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-auto-rows: auto;
    font-family: sans-serif;
    margin-bottom: 1em;
    max-width: 100%;
    transform-origin: left top;
    column-gap: 0.2em;

}

.tile-group * {
    box-sizing: border-box;
}

.tile-group a:hover {

    color: #ff015d;
    filter: brightness(150%);

}

.tile-header {
    color: #777;
    font-size: 2.5rem;
    scroll-margin-top: 10rem;
}

.tile-single {
    display: flex;
    flex-direction: column;
    gap: 0vh;

}

.tile-image {
    aspect-ratio: 1.393;
    object-fit: cover;
    display: block;
    margin-bottom: 3.5vh;
    width: 100%;

}



.tile-text {

    padding-left: 0.5vw;
    max-width: 95%;
    word-wrap: break-word;
    font-size: 1.4rem;

}

.tile-text.title {

    padding-left: 0.5vw;
    max-width: 95%;
    word-wrap: break-word;
    height: auto;

}

.tile-text a {
    font-style: italic;
    font-weight: bold;
    color: #ff015d;
    font-style: italic;
    text-decoration: underline;

}



.tile-text.description {

    padding-left: 0.5vw;
    max-width: 95%;
    word-wrap: break-word;

}


@media all and (orientation: portrait) and (width <=36rem) {

    .tile-group {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));

    }


}

@media all and (orientation: landscape) and (height <=36rem) {

    .tile-group {
        grid-template-columns: repeat(auto-fill, minmax(80%, 1fr));


    }

    .tile-header-group-container {
        border-left: 2.5px solid #777;

    }

}

@media all and (orientation: portrait) and (36rem < width <=48rem) {

    .tile-group {
        grid-template-columns: repeat(auto-fill, minmax(80%, 1fr));
    }

}

@media all and (orientation: landscape) and (36rem < height <=48rem) {

    .tile-group {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    }

}

@media all and (orientation: portrait) and (48rem < width < 87.5rem) {

    .tile-group {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    }
}

@media all and (87.5rem <=width) {
    .tile-group {
        grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    }
}

@media all and (135rem <=width) {
    .tile-header {
        font-size: 2.5vw;
    }

    .tile-text {
        font-size: 2vw;
    }

}