/* Mobile devices portrait ----------- */
@media (max-width:1024px) and (orientation: portrait) {

    body {
        background-color: #f5f6f7;
        margin: 0px;
    }

    .container{
        display: grid;
    }
    
    .headerTitleContainer{
        justify-self: left;
        width: 18em;
    }

    h1{
        font-size: 2em;
        font-family: local72;
        font-weight: bold;        
    }

    h2 {
        font-size: 1.3em;
        font-weight: bold;
        font-family: local72;
        margin: 0.5em 0em 0em 0em;
    }

    h3{
        font-size: 1.3em;
        font-family: local72;
        font-weight: normal;
        margin: 0;
        max-width: 100%; /* Ensure it stays within the container */
        word-wrap: break-word; /* Allow wrapping if needed */
        overflow-wrap: break-word; /* Ensure long words break properly */
    }

    h4 {
        font-size: 1vw;
        font-family: local72;
        font-weight: normal;
        margin: 0;
    }

    p {
        display: inline-block;
        font-family: local72;
        font-size: 1.2em;
        margin: 0.5em 0.5em 0em 0em;
    }

    .tileIcon{
        width: 2em;
        min-width: 2em;
    }

    .topContainer {
        position: static;
        width: 100%;
        height: 14em;
        background-color: white;
    }
    
    .topContainerContent {
        display: grid;
        margin: 1em 1em;
    }

    .tile {
        background-color: white;
        border-radius: 5px;
        transition: 0.2s;
        filter: drop-shadow(1px 1px 10px #88888855);padding: 1.5em 0em 1.8em 1.5em;
        width: 18em;
        height: 130px;
        min-width: 18em;
    }

    .imgSAPlogo {
        height: 8vw;
    }
    
    .lowerContainer{
        position: relative;
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: repeat(auto-fill, minmax(18em, 18em));
        grid-gap: 3em;
        margin: 2em 0em 3em 0em;
        justify-items: center;
        justify-content: center;
    }

    .innerContainer {
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 1em;
        align-items: center;
        justify-items: center;
        margin: 1em;
    }

    .innerContainerImage{
        width: 100%;
    }

    @font-face {
        font-family: "local72black";
        src: url(72-Black.ttf);
    }

    @font-face {
        font-family: "local72";
        src: url(72-Regular.ttf);
    }

    @font-face {
        font-family: "local72bold";
        src: url(72-Bold.ttf);
    }

    @font-face {
        font-family: "local72condensed";
        src: url(72-Condensed.ttf);
    }

    @font-face {
        font-family: "local72condensedbold";
        src: url(72-CondensedBold.ttf);
    }


    
}