/* JAM CONNECTION PAGE STYLES */

.jamcon {
  background-color: #152015;
}

/* heading */
.jamcon h3 {
  margin: auto;
  width: 70%;
  padding: 4rem 1rem 1rem 1rem;
}

/* Images Jam connection */
.jamcon .imagegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 70%;
  margin: auto;
  padding: 2rem 1rem 5rem 1rem;
  gap: 1rem;
}

.grid-box {
  min-width: 250px;
  min-height: 250px;
}

/* images */
.grid-box.jam-img {
  background-size: cover;
}

.jam-img:nth-of-type(2) {
  background-image: url('../images/jam/schlarpe_club_jam_05.png');
}

.jam-img:nth-of-type(4) {
  background-image: url('../images/jam/schlarpe_club_jam_02.png');
}

.jam-img:nth-of-type(5) {
  background-image: url('../images/jam/schlarpe_club_jam_03.png');
}

.jam-img:nth-of-type(6) {
  background-image: url('../images/jam/schlarpe_club_jam_01.png');
}


/* Squares */
.imagegrid .infobox {
  padding: 1.5rem 2rem;
  background-color: var(--pastel-green);
}

.infobox p {
  color: var(--darkgray);
}

.infobox p.first {
  font-family: 'Bebas Neue', sans-serif;
}

.imagegrid img {
  width: 100%;
}


/* Jam Session Daten */
.jam-dates {
  background-color: #152015;
}

.cta-box  {
  width: 60%;
  margin: auto;
  text-align: center;
  border-radius: 5px;
  border: 1px solid var(--pastel-green);
  padding: 2rem 4rem;
}

.cta-box p {
  padding-bottom: 1rem;
  font-size: 1.2rem;
}


/* Email */
.email-info {
  padding: 4rem 0; 
}

.email-info p {
  font-family: 'Bebas Neue';
  font-size: 1.9rem;
  width: 100%;
  text-align: center;
}

.email-info a {
  font-size: 1.2rem;
  width: 100%;
  text-align: center;
  padding: 0 1rem;
}

.email-info i {
  padding: 1rem;

}



/* --- MEDIA QUERIES --- */

/* Tablets */
@media screen and (max-width: 990px) {
  /* heading */
  .jamcon h3 {
    width: 80%;
    text-align: center;
  }


  /* Images Jam connection */
  .jamcon .imagegrid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 80%;
  }

}

/* Mobile */
@media screen and (max-width: 760px) {
  /* heading */
  .jamcon h3 {
    width: 90%;
  }


  /* Images Jam connection */
  .jamcon .imagegrid {
    width: 90%;
  }

  /* Jam Session Daten */
  .cta-box  {
    width: 80%;
  }
}


/* Mobile small*/
@media screen and (max-width: 600px) {


  /* Images Jam connection */
  .jamcon .imagegrid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
  }

  .grid-box {
    min-height: 150px;
  }
  .jam-img {
    min-height: 400px;
  }

  /* Jam Session Daten */
  .cta-box  {
    width: 90%;
    padding: 4rem 2rem;
  }


}