.landing-logo-button {
    border: 0;
    color: transparent !important;
    height: auto;
    max-width: 100%;
    width: clamp(250px, 40vw, 350px);
}

.landing-options-button {
    aspect-ratio: 1 / 1;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    cursor: pointer;
    display: block;
    max-height: 25vmin;
    width: min(clamp(120px, 40vw, 350px));
}

.landing-freighter-button {
    background-image: url('../Images/LandingCargo.png');
}

    .landing-freighter-button:hover {
        background-image: url('../Images/LandingCargoHover.png');
    }

.landing-passenger-button {
    background-image: url('../Images/LandingPassenger.png');
}

    .landing-passenger-button:hover {
        background-image: url('../Images/LandingPassengerHover.png');
    }

.landing-container {
    background-image: url("../Images/Background.jpg");
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 80vh;
    padding-bottom: 10px;
    width: 100%;
}

    .landing-container > .landing-layout {
        align-items: center;
        display: flex;
        flex: 0 0 50%;
        justify-content: center;
        min-height: 0;
        padding: 0 2rem;
    }

        .landing-container > .landing-layout:nth-of-type(2) {
            align-content: center;
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem;
            justify-content: center;
            overflow: hidden;
        }

.landing-item-layout {
    display: flex;
    flex: 1 1 100%;
    justify-content: center;
}


@media (min-width: calc(2 * 240px + 2rem)) {

    .landing-item-layout {
        flex: 0 1 auto;
    }

        .landing-item-layout:first-child {
            justify-content: flex-end;
        }

        .landing-item-layout:last-child {
            justify-content: flex-start;
        }
}