.yearbook {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-auto-rows: minmax(400px, auto);
}

.message-layout {
    padding: 22px 25px 25px;
}

.message-layout h4 {
    font-size: 1.2em;
    margin-bottom: -15px !important;
}

.message-layout h5 {
    font-size: 1em;
    color: #000;
    margin-bottom: 25px;
}

.message-wrapper {
    height: 450px;
    display:block;
    overflow:hidden;
    word-break: break-word;
    word-wrap: break-word;
}

.less, .more {
    text-decoration: underline;
    cursor: pointer;
}

span.contributor-btns {
	position: relative;	
	z-index: 100;
}


.id7-main-content .image-with-text .text-on-image {
 background-color:transparent;
}

.image-with-text .first-line, .image-with-text .second-line {
	display: block;
    text-align: center;
}



/* SW override min-width for centred text - we only have two words
// so it should be ok to fit in on mobile */

body .id7-main-content .image-with-text {
	position: relative;
	overflow: hidden;
}


.id7-main-content .image-with-text .text-on-image.middle {
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


.id7-main-content .image-with-text .text-on-image {
	position:absolute;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.id7-main-content .image-with-text .text-on-image h2 {
	color: white;	
	margin-bottom: 0;
}

#main section.full-width {
    margin: 0 -20px;
    padding: 35px 20px 20px;
}


span.first-line {
	font-size: 15px;
	font-weight: 400;
}

span.second-line {
	font-size: 30px;
	line-height: 30px;
	letter-spacing: 5px;
}

@media (min-width: 576px) {
	span.first-line {
		font-size: 20px;
		font-weight: 400;
	}

	span.second-line {
		font-size: 45px;
		line-height: 45px;
		letter-spacing: 7px;
	}
}


@media (min-width: 768px) {
	span.first-line {
		font-size: 24px;
		line-height: 24px;
		letter-spacing: 1px;
	}

	span.second-line {
		font-size: 54px;
		letter-spacing: 10px;
		line-height: 62px;
	}
}


@media (min-width: 992px) {
	span.first-line {
		font-size: 43px;
		line-height: 54.6px;
		letter-spacing: 2px;
	}

	span.second-line {
		font-size: 99px;
		letter-spacing: 19px;
		line-height: 99px;
	}
}

@media (max-width: 768px) {
   .message-wrapper h4, .message-wrapper h5 {
      text-align: center;
  }
  
   .message-layout .message-wrapper h5 {
      margin-top: 22px;
  }
  
  .message-wrapper {
   	margin-right: 15px; 
  }

  .message-wrapper hr {
      margin: 0 0 21px 0;
  }

 
  .message-wrapper img {
      max-width: 200px;
      height: 200px;
      margin: 0 auto 20px auto;
      display: block;
  } 
}