#intro{
    font-family: 'Darker Grotesque', sans-serif;
    font-size: 15px;
    padding-left: 50px;
    padding-bottom: 40px;
}

#intro h1{
    font-size: 40px;
    padding-bottom: 25px;
    font-weight: 500;
    font-weight: lighter;
}

#intro h2{
    font-size: 15px;
    font-weight: lighter;
}

#intro h3{
    font-size: 15px;
    padding-right: 50px;
    text-align: right;
    font-weight: lighter;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Præcis 4 kolonner */
    gap: 50px; /* Afstand mellem elementerne */
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 130px;
}

.grid{
    height: 460px;
    position: relative;
}

.produkt {
    height: 400px; /* Juster højden på kortet */
    width: 100%; /* Juster bredden på kortet */
    max-width: 300px;
    position: relative;
}

.produkt img { /* Billedet skal fylde hele kortet */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tekst{
    display: flex;
    font-family: 'Darker Grotesque', sans-serif;
    font-size: 18px;
    padding-top: 5px;
    line-height: 30px;
}
.produkt a{
    text-decoration: none;
    color: #000000;
}

.arrow {
    position: absolute;
    top: 50%;
    color: black;
    cursor: pointer;
    font-size: 16px;
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

.heart-checkbox {
    display: none;
}

.heart-label {
    position: absolute;
    transform: translateY(-100%);
    right: 0;
    font-size: 22px;
    cursor: pointer;
    color: #000000;
    padding-bottom: 10px;
}

/* Default tomt hjerte */

.heart-label::before {
    content: "♡";
}

/* Responsiv styling */
@media (max-width: 768px) {
    h1 {
        font-size: 30px !important; /* Gør teksten mindre på mobil */
        margin-top: 40px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 kolonner på mobil */
        gap: 20px; /* Mindre afstand mellem elementerne */
        margin-bottom: 60px;
        margin-top: -20px;
    }

    .grid {
        height: auto; /* Lad højden justere sig automatisk */
        padding: 10px; /* Tilføj lidt indre afstand */
    }

    .grid img {
        width: 100%; /* Sørg for, at billederne fylder deres container */
        height: auto; /* Bevar billedets proportioner */
        object-fit: cover; /* Sørg for, at billedet dækker hele containeren */
    }

    .arrow {
        transform: translateY(-180%); /* Juster for pilenes egen højde */
        cursor: pointer;
    }


}