h1 {
    font-size: 40px;
    padding-left: 50px;
    font-weight: 500;
    font-weight: lighter;
    font-family: 'Darker Grotesque', sans-serif;
}

.lookbook {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding: 50px;
}
.lookbook img{
    transition: transform 0.3s ease; /* Tilføj en overgangseffekt */
}
.lookbook img:hover{
    cursor: pointer; /* Ændrer cursor til hånd ved hover */
    transform: scale(1.01)
}
  
  /* Generel styling for billeder og tekst */
  .item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
  
  .item h1, .item h2, .item h3 {
    font-family: 'Darker Grotesque', sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
}
  
  /* Eksempel på hvordan man placerer elementerne i grid */
  .item1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .item2 { grid-column: 3 / 5; grid-row: 1 / 2; }
  .item3 { grid-column: 5 / 7; grid-row: 1 / 2; }
  .item4 { grid-column: 1 / 3; grid-row: 2 / 3; }
  .item5 { grid-column: 3 / 5; grid-row: 2 / 3; }
  .item6 { grid-column: 5 / 7; grid-row: 2 / 3; }
  .item7 { grid-column: 1 / 3; grid-row: 3 / 4; }
  .item8 { grid-column: 3 / 5; grid-row: 3 / 4; }
  .item9 { grid-column: 5 / 7; grid-row: 3 / 4; }
  .item10 { grid-column: 1 / 3; grid-row: 4 / 5; }
  .item11 { grid-column: 3 / 7; grid-row: 4 / 5; }
  .item12 { grid-column: 1 / 3; grid-row: 5 / 6; }
  .item13 { grid-column: 3 / 5; grid-row: 5 / 6; }
  .item14 { grid-column: 1 / 5; grid-row: 6 / 7; }
  .item15 { grid-column: 5 / 7; grid-row: 5 / 6; }
  .item16 { grid-column: 5 / 7; grid-row: 6 / 7; }
  .item17 { grid-column: 1 / 3; grid-row: 7 / 8; }
  .item18 { grid-column: 3 / 5; grid-row: 7 / 8; }
  .item19 { grid-column: 5 / 7; grid-row: 7 / 8; }

  .item20{
    display: none;
  }

  
/* Responsiv styling til mobil */
@media (max-width: 768px) {
    .arrow-icon {
        top: 80px;
        left: 20px;
        width: 20px;
    }

    h1 {
        font-size: 28px;
        padding-left: 20px;
        margin-top: 30px;
    }

    .lookbook {
        grid-template-columns: repeat(2, 1fr); /* To kolonner */
        gap: 10px;
        padding: 20px;
        margin-bottom: 80px;
    }

    .item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }


    .item1  { grid-column: 1 / 2; grid-row: 1 / 2; }
    .item2  { grid-column: 2 / 3; grid-row: 1 / 2; }
    .item3  { grid-column: 1 / 3; grid-row: 2 / 3; }
    .item4  { grid-column: 1 / 2; grid-row: 3 / 4; }
    .item5  { grid-column: 1 / 2; grid-row: 4 / 5; }
    .item6  { grid-column: 2 / 3; grid-row: 3 / 4; }
    .item7  { grid-column: 2 / 3; grid-row: 4 / 5; }
    .item8  { display: none; }
    .item9  { grid-column: 1 / 2; grid-row: 6 / 7; }
    .item10 { grid-column: 2 / 3; grid-row: 6 / 7; }
    .item11 { grid-column: 1 / 3; grid-row: 7 / 8; }
    .item12 { grid-column: 1 / 2; grid-row: 8 / 9; }
    .item13 { grid-column: 2 / 3; grid-row: 8 / 9; }
    .item14 { grid-column: 1 / 3; grid-row: 9 / 10; }
    .item15 { grid-column: 1 / 2; grid-row: 10 / 11; }
    .item16 { grid-column: 2 / 3; grid-row: 10 / 11; }
    .item17 { grid-column: 1 / 2; grid-row: 11 / 12; }
    .item18 { grid-column: 2 / 3; grid-row: 11 / 12; }
    .item19 { grid-column: 1 / 2; grid-row: 12 / 13; }
    .item20 { display: block; grid-column: 2 / 3; grid-row: 12 / 13; }
}