body {
    margin: 0;

}



.image-grid {
    --gap: 20px;
    --num-cols: 4;
    --row-height: 300px;

    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);


}

.carousel-caption {
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem;
  border-radius: 8px;
}

.image-grid img {
    opacity: 1.0;
    cursor: pointer;
	max-height: 200px;
}

.image-grid img:hover {
    opacity: 0.6;
    cursor: pointer;
}

.image-grid>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.image-grid-col-2 {
    grid-column: span 2;
}

.image-grid-row-2 {
    grid-row: span 2;
}

.image-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
    position: relative; /* needed for absolute positioning of text */
    width: 100%;
    height: 100%;
}

.image-title {
	color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
}

.image-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-grid-text {
    position: absolute;
    top: 10px; /* adjust as needed */
    left: 10px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* makes text readable on images */
    z-index: 2;
}


.text-block {
  max-width: 800px;    /* keeps the text from being too wide */
  margin: 0 auto;      /* centers the block */
  padding: 0 20px;     /* adds space on left and right */
  color: white;        /* white text */
  font-size: 1.1rem;   /* readable font size */
  line-height: 1.6;    /* good line spacing */
}

@media screen and (max-width: 1024px) {
    .image-grid {
        --num-cols: 2;
        --row-height: 220px;

    }

}