.showEvents card
{
    max-width: 100%;
}

.eventheader img
{
    height: 30vh;
    width: 100%;
    object-fit:cover;
}

.object-fit-cover{
    object-fit: cover;
    background-position: center;
}

.nav-link{
    --bs-nav-link-color: rgba(0, 0, 0, 0.55);
}

/* MD - Medium */
@media screen and (max-width: 768px) {

    /* Giver texten i footeren mere plads */
    .event-footer p{
        width: 100%;
    }
    
    /* Får event infomationen til at stå lodret til at lettere kunne se alt infomation */
    .event-edit, .event-info .row{
        display: flex;
        flex-direction: column;
    }
    /* Giver infomationen lidt lodret padding for at give det mere lyft og lettere at se på */
    .event-info .row{
        padding-block: 0.5rem;
    }
    /* Giver infomations rækkerne untagen den nederste en lille grå underline til at kkunne se forskæld på de forskellige infomationer */
    .event-info .row:not(.row:last-of-type){
        border-bottom: 1px solid hsl(0, 0%, 70%);
    }
    /* Giver infomationer mere plads at vise på og forminsker marginen i bunden til at få titelen og infomationen tættere sammen */
    .event-info p{
        width: 100%;
        margin-block-end: 0.2rem;
    }
    /* Giver input fælterne mere plads så de er lettere at ramme på telefon */
    .event-edit input, .event-edit textarea{
        width: 100%;
    }

    /* Får event tilmeldsen til at stå lodret til at lettere kunne se alle dele */
    .event-signup{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Får event infomationen til at stå lodret til at lettere kunne indtaste loginet */
    .login-form .row{
        display: flex;
        flex-direction: column;
        margin-left: 0.2rem;
    }
    /* Fjerner paddingen i login formen */
    .login-form .row label, .login-form .row input{
        padding-left: 0;
    }
    /* Giver input fælterne mere plads så de er lettere at ramme på telefon */
    .login-form .row input{
        width: 80%;
        padding-inline: 0.5rem;
    }

    /* Giver labelsne i event create mere plads så de ikke bliver splittet op i 2 linjer */
    .event-create label{
        width: 100%;
    }
    /* Gøre så kr kan stå efter pris inputtet */
    .event-pris{
        flex-wrap: wrap;
    }
    /* Gøre så kr kan stå efter pris inputtet */
    .event-pris input[type="number"]{
        width: 70%;
    }
}