/* ==== hero ==== */

.hero__image {
    background-image: url(../images/events/events.png);
    background-position: top;
}

/* ==== conference ==== */
.conference {
    width: 100%;
}
.carousel {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.photo {
    /* aspect-ratio: 4032 / 3024; */
    height: 200px;
    background: center / cover no-repeat;
    /* background-size: contain; */
}
.photo1 {
    background-image: url(../images/conference/1.jpeg);
}
.photo2 {
    background-image: url(../images/conference/2.jpeg);
}
.photo3 {
    background-image: url(../images/conference/3.jpeg);
}
.photo4 {
    background-image: url(../images/conference/4.jpeg);
}
.photo5 {
    background-image: url(../images/conference/5.jpeg);
}
.photo6 {
    background-image: url(../images/conference/6.jpeg);
}
.photo7 {
    background-image: url(../images/conference/7.jpeg);
}
.photo8 {
    background-image: url(../images/conference/8.jpeg);
}
/* ==== up coming events ==== */

.upcoming-events {
    width: 100%;
}
.upcoming-events__title {
    margin-top: 42px;
    padding-bottom: 10px;
    border-bottom: 2px #006072 solid;
    font: 600 36px Quicksand, sans-serif;
}

/* ==== past events ==== */

.past-events {
    width: 100%;
}
.past-events__title {
    padding-bottom: 10px;
    border-bottom: 2px #006072 solid;
    font: 600 36px Quicksand, sans-serif;
}

/* ==== table styling ==== */

.table {
    width: 100%;
    margin-top: 32px;
    margin-bottom: 88px;
    display: flex;
    flex-direction: column;
}
.table > div:nth-of-type(odd) {
    background-color: rgba(0, 96, 114, 0.1);
}
section.upcoming-events .table {
    flex-direction: column-reverse;
}
.upcoming-events__table__item {
    display: flex;
    gap: 10px;
    padding: 12px 10px;
    font: 400 16px Lato, sans-serif;
}
.upcoming-events__table__header {
    flex: 1;
    display: flex;
    gap: 10px;
}
.upcoming-events__table__header > div {
    flex-basis: 33%;
}
.upcoming-events__table__event {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.expandable-event-description:hover {
    cursor: pointer;
}
.expanded-event-description {
    display: block;
}

/* ==== tablets ==== */

@media(max-width: 1024px) {
    .upcoming-events__title {
        margin-top: 25px;
    }
}

/* ==== phones ==== */

@media(max-width: 640px) {
    .hero {
        display: none;
    }
    .upcoming-events__title {
        margin-top: 18px;
    }
    .upcoming-events__title {
        font: var(--h1-phone);
    }
    .upcoming-events__table__item {
        display: block;
    }
    .upcoming-events__table__header {
        border-bottom: var(--app-teal) 1px solid ;
        padding-bottom: 8px;
        justify-content: space-between;
    }
    .upcoming-events__table__header > div {
        flex-basis: auto;
    }
    .upcoming-events__table__type {
        display: none;
    }
    .upcoming-events__table__event {
        margin-top: 4px;
    }
}