.header {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: solid 1px lightgray;
    margin-bottom: 3%;
    box-shadow: 5px 5px 10px;
    padding: 1%;
    color: white;
}

.details {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    color: white;
}

.detailsView {
    display: grid;
    grid-template-columns: 40% 60%;
    overflow: hidden;
    padding: 2% 0% 0% 3%;
    margin-bottom: 2%;
    color: white;
}

.photo img {
  width: 600px;
  height: 500px;
}


@media (max-width: 980px) {
    .detailsView {
        grid-template-columns: 100%;
    }

    .eventDetails {
        margin-bottom: 5%;
    }

    .photo img {
        width: 300px;
        height: 250px;
        margin-bottom: 8%;
    }

    .col-6 {
        width: 100%;
    }

    .photo {
        text-align: center;
    }
}