#speakers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (width >= 48rem) {
    #speakers {
        grid-template-columns: repeat(3, 1fr);
    }
}

#presentation-centric {
    margin-top: 4rem;
    margin-bottom: 2rem;
}



#presentation-centric > ul {
    display: flex;
    flex-direction: column;
    align-content: space-evenly;
    flex-wrap: wrap;
    text-align: start;
    gap: 2rem;
    max-height: 50vh;
    height: 50vh;
}

@media (width <= 48rem) {
    #presentation-centric > ul {
        height: auto;
        max-height: none;
        display: flex;
        flex-direction: row;
    }
}

#presentation-centric ul, #presentation-centric li,  #speaker-presentations li, #speaker-presentations ul{
    list-style: none;
    margin:0;
    padding:0;
}

#speaker-presentations details {
    scroll-margin-top: 3.5em;
}



#presentation-centric li {
    margin: 0.5rem 0;
}

.speaker-tile-title {
	font-weight: 600;
	color: #3e3e3e;
}

.speaker-tile-info {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0.5rem 1rem;

	font-size: 1em;
  overflow: scroll;
	gap: 1rem;
}

.speaker-tile > a {
    text-decoration: none;
}

.speaker-tile #profile-link {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.speaker-tile {
  /* placeholder: goal is feedback that you can click a tile */
   transition: transform ease 200ms;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-content: center;
}


.speaker-tile:hover {
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: translate(0, -5px) scale(1.05);
  z-index: 100;
}

.speaker-tile .image {
   padding-bottom: 75%;
}