html,
* {
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
    color: white;
}

body {
    background-color: #000000;
    line-height: 1.6;
}

p {

    margin: 10px 0px;
}

.lead {
    font-size: 1.5rem;
    font-weight: 300;
    color: white;
}

.container {
    margin: 40px auto;
    max-width:1600px;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color:#b3400e;
}


.intro{
    max-width:800px;
    margin: 30px auto;
    padding:10px;
}
.btn {
    padding: 1.25rem;
    border: 0;
    border-radius: 3px;
    background-color: #4F46E5;
    color: #fff;
    cursor: pointer;
}

img {
    max-width: 100%;
}

.lightboxed--caption {
    text-align: center;
    padding: 0;
    left: 0;
    /* position the left edge of the element at the middle of the parent */
    font-size: .8rem;
    background: transparent;
}

.photogrid{
      display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  gap: 80px;
  justify-content: center;
}

.photo-item {
  position: relative;
  overflow: hidden;
}

.photo-item img {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

.photo-item img:hover {
  opacity: 0.7;
}

.photo-item::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-item:hover::after {
  opacity: 1;
}