.clickable-card {
    display: block;
    background-color: rgba(24, 56, 102, 0.03);
    padding: 28px;
    border-radius: 16px;
    color: #183866; /* Mørk blå tekst */
    text-decoration: none; /* Fjerner understreking */
    position: relative; /* Må være relativ for at .card-icon skal fungere riktig med absolutt posisjon */
    height: 300px; /* Sett en fast høyde */
    overflow: hidden; /* Skjul innhold som går utenfor */
    margin-bottom: 16px;
   
}
 
.clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    text-decoration: none; 
}


.clickable-card h2 {
  text-decoration: none; /* Fjerner understreking */
  font-family: 'Arial', sans-serif; /* Endrer fonten til Arial (juster etter behov) */
  color: #183866; /* Setter tekstfargen til en oransje tone (kan byttes ut) */
  font-size: 20px;
  font-weight: bold;
  margin-top:60px;
}

.card-iconet {
  position: absolute; /* Plasser ikonet nøyaktig */
  right: 18px; /* Juster til høyre, innenfor rammen */
  top: 18px; /* Juster avstand fra toppen */
  margin: 0; /* Fjern unødvendige marginer */
  width: 40px; /* Juster størrelsen på ikonet */
  height: 40px;
} 




.boble-ressurser{
  display:flex;
  gap:8px;
  font-family:arial, sans-serif;
  margin-bottom: 32px;
  font-size:16px;
  color: #183866;
}

.tematikk-bobole-ressurser{
    padding: 8px 16px; /* Luft rundt teksten */
    border-radius: 20px; /* Runde kanter */
  background-color: #E1EFF9;
}

.tematikk-bobole-ressurser-filtrering{
  border: .8px solid #183866; /* Blå ramme */
    padding: 8px 16px; /* Luft rundt teksten */
    border-radius: 20px; /* Runde kanter */
  
}





.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}




@media (max-width: 1024px) {

.boble-ressurser{
    margin-bottom: 24px
}
  
  
  .clickable-card {
    height: auto; /* Sett en fast høyde */
    margin-right:40px;
     margin-left:16px;
}
  
  .boble-ressurser {
    display: flex;
    flex-wrap: wrap; /* Tillater stabling hvis det ikke er plass */
    gap: 8px; /* Avstand mellom boblene */
    margin-bottom: 32px;
}


}



@media (max-width: 768px) { /* Gjelder for skjermer som er 768px brede eller mindre */
.clickable-card{
        margin-left: 16px;
       margin-right:16px;
       height: auto; /* Sett en fast høyde */
  
}
  
  }
}