.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.photo-item {
    text-align: center;
}

.photo-item img {
    width: 450px;
    max-width: 100%;
    height: auto;
}
/* Main collage container */
.collage {
    display: grid;

    /* Responsive columns */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    /* Base row height */
    grid-auto-rows: 180px;

    /* Space between images */
    gap: 10px;

    /* Space around page edges */
    padding: 10px;

    box-sizing: border-box;
}

/* Images */
.collage img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    display: block;
}

/* Different image shapes */
.wide {
    grid-column: span 2;
}

.tall {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}

.imageflex {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 900px;
  margin: 10px auto;
}

.imgContainer{
    float:left;
}

.text-block {
  flex: 1;
}

.imageflex img {
  object-fit: cover;
}

.nav {
    display: flex;
    justify-content: space-evenly; /* Equal space around all items */
    align-items: center;
    color: var(--text-color);
    font-size: 25px;
    font-family: 'Manrope'
    font-style: normal;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

.nav a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px; /* space between img and text */
}

.nav a:not(:last-child) {
    border-right: 1px solid var(--text-color);
    padding-right: 20px;
    margin-right: 20px;
}





.talk-titles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px 5px 5px 5px;/* Adds space between links */
  
}

/* background-color: #B0B5B0; */

.talk-titles a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
 }

  /* */





.link-row {
  display: flex;
  justify-content: space-between;
  padding: 0px 50px 5px 50px;
}

/*   background-color: #f0f0f0; */

/* Make each section inside the row a column */
.link-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stack links vertically */
.link-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0px 5px 15px 5px;/* Adds space between links */
}

.link-row a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}



.talk-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.link-row-header {
  display: flex;
  justify-content: space-between;
  padding: 5px 40px;
}

.link-row-header a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px; /* <-- Add this line */
}