.single-event__banner {
    background-color: var( --nav-area );
}

    .single-event__banner .container {
        aspect-ratio: 21/9;
    }

    .single-event__banner-img {
        display: block;
        height: 100%;
        object-fit: contain;
        width: 100%;
    }

.single-event__title span{
  display: block;
  font-size: 1.125rem;
  margin-top: 5px;
}

.single-event__dates{
  font-size: 1.11rem;
  margin: 20px 0 40px;
}

  .single-event__dates span{
    font-weight: normal;
  }

.single-event__main{
  border-top: 1px solid var(--border);
}

  .single-event__main .container{
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 62em){
    .single-event__main .container{
      flex-direction: row;
    }
  }

.single-event__info{
  max-width: 832px;
  box-sizing: border-box;
  background-color: var(--background);
}

  @media screen and (min-width: 62em){
    .single-event__info{
      padding: 0 40px 0 0;
    }
  }

.single-event__location{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

  .single-event__map{
    width: 100%;
    max-width: 485px;
    height: 200px;
    background-color: var(--background);
    box-shadow: #d2d0c7 3px 3px 0px 0px;
    margin: 0 30px 30px 0;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
  }

  .single-event__map #google-map{
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .map-footer{
    background-color: var(--background);
    padding: 8px 10px;
    text-align: right;
    display: block;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

    .map-footer__link{
      font-size: 0.875rem;
      background: url('../../images/external-link.png') no-repeat left center;
      background-size: 16px 16px;
      padding-left: 23px;
    }

.single-event__address{

}

  .single-event__address h3{
    margin-top: 0;
  }

.single-event__content{

}

  .single-event__content img{
    max-width: 100%;
  }

.single-event__more {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.single-event__aside {
    background-color: var( --nav-area-alt );
    box-sizing: border-box;
    padding: 20px 40px;
    width: 100%;
}

@media screen and (min-width: 62em) {
    .single-event__aside {
        max-width: 448px;
    }
}

    .single-event__aside__inner {
        position: sticky;
        top: 3rem;
    }

    .single-event__aside-title {
        font-size: 1.375rem;
        margin-top: 0;
    }

.single-event__organiser {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

    .single-event__organiser-logo {
        display: block;
        flex: none;
        height: auto;
        margin-right: 20px;
        width: 70px;
    }

        .single-event__organiser-logo img {
            display: block;
            height: auto;
            width: 100%;
        }

    .single-event__organiser-details {}

        .single-event__organiser-details h4 {
            font-size: 1rem;
            margin: 0 0 10px;
        }

        .single-event__organiser-details h3 {
            font-size: 1.125rem;
            margin: 0;
        }

            .single-event__organiser-details h3 a {
                color: var(--email);
                text-decoration: none;
            }

    .single-event__organiser-more {}

        .single-event__organiser-more .button {
            cursor: pointer;
            margin-bottom: 1.5rem;
        }

            .single-event__organiser-more .button:hover {
                text-decoration: underline;
            }

        .single-event__organiser-more__details {
            padding-bottom: 1rem;
        }

            .single-event__organiser-more__details h4 {
                margin-top: 0;
            }

            .single-event__organiser-more__details .truncate {
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

.single-event__focus{
  display: block;
  list-style: none;
  margin: 16px 0;
  padding: 0;
  font-size: 1.125rem;
}

  .single-event__focus li{
    display: inline-block;
  }

    .single-event__focus li::before{
      content: '-';
      display: inline-block;
      margin-right: 5px;
    }

    .single-event__focus li:first-child::before{
      display: none;
    }

.comments{
 background-color: var(--nav-area);
 position: relative;
 padding: 20px 0;
}

  .comments::before{
    content: '';
    display: block;
    position: absolute;
    background-color: var(--nav-area);
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
  }

  @media screen and (min-width: 62em){
    .comments{
      margin-right: -40px;
    }
  }

  .comments__title{
    background: url('../../images/comments.svg') no-repeat left 10%;
    font-size: 1.125rem;
    padding: 0 0 20px 34px;
    border-bottom: 5px solid var(--secondary);
    display: inline-block;
    margin-bottom: 0;
  }

  .comments__form, .comment-respond{
    margin-bottom: 40px;
  }

    .comments__form .submit, .comment-respond .submit{
      background-color: var(--main);
      color: var(--background);
      font-weight: 700;
      border-radius: 8px;
      border: none;
      font-size: 1.125rem;
      line-height: 1.67em;
      padding: 4px 16px;
    }

    .comments__form .required-field-message, .comment-respond .required-field-message{
      display: block;
      font-size: 0.875rem;
    }

    .comments__form .comment-form-comment label, .comment-respond .comment-form-comment label{
      display: block;
      margin-bottom: 10px;
    }

    .comments__form .comment-form-comment textarea, .comment-respond .comment-form-comment textarea{
      display: block;
      width: calc(100% - 60px);
      border: none;
      padding: 20px;
      border-radius: 8px;
      box-shadow: #d2d0c7 3px 3px 0px 0px;
      box-sizing: border-box;
    }

.comment{
  display: flex;
  flex-direction: row;
  margin: 20px 0;
  flex-wrap: wrap;
}

  @media screen and (min-width: 62em){
    .comment{
      margin-right: 60px;
    }
  }

  .comment__author{
    margin-right: 15px;
    max-width: 150px;
  }

    .comment__author-photo{
      max-width: 79px;
      height: auto;
      position: relative;
    }

      .comment__author-photo img{
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
      }

  .comment__org{
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 35px;
    height: 35px;
  }

    .comment__org img{
      border: 2px solid var(--background);
    }

  .comment__content{
    width: calc(100% - 165px);
    display: flex;
    flex-direction: column;
  }

  .comment__body{
    border: 1px solid #d2d0c7;
    background-color: var(--background);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 20px;
    line-height: 1.5em;
    width: 100%;
  }

  .comment + .children{
    width: 100%;
  }

    @media screen and (min-width: 64em){
      .comment + .children .comment{
        margin-left: 50px;
      }
    }

    .comment .children .comment{
      margin-right: 0;
    }

  .comment__footer{
    margin-top: 16px;
  }

    .comment-reply-title small{
      display: block;
      margin-top: 10px;
    }

.single-event__manage{
  padding: 20px 0;
}

.edit-link{
  padding-left: 25px;
  background: url('../../images/pencil.png') no-repeat left center;
  background-size: 20px auto;
}
