.view-resort-overview {

  h2 {
    margin-bottom: 3rem;
    line-height: 0.8;
    font-size: 2.2rem;
    color: var(--agold);
    /* Combat extra space around the font */
  }

  .views-field-field-short-desc {
    margin-bottom: 3rem;
  }

  .glance-elements {
    margin-bottom: 3.5rem;
    color: var(--agold);
    font-size: var(--body-text-size);
  }

  .glance-elements .field__label {
    font-weight: 600;
    margin-right: 10px;
  }

  .glance-elements>div>div {
    display: flex;
    color: var(--agold);
  }

  .resort-row {
    display: flex;
    gap: 8rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--agold);
    padding-bottom: var(--sec-pad);
    margin-bottom: var(--sec-pad);
  }

  .view-content.row .views-row:last-child .resort-row {
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-bottom: 0px;
    ;
  }

  .resort-row__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .resort-row__media {
    flex: 0 0 45%;
  }

  .resort-row__media img {
    width: 100%;
    height: auto;
    display: block;
  }



  .views-field-field-cost-m2,
  .views-field-field-altitude-range {
    display: flex;
  }

  .views-field-field-cost-m2>span,
  .views-field-field-altitude-range>span {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--agold);
    margin-right: 0.5rem;
    font-size: 0.8rem;
  }

  .views-field-field-cost-m2>div,
  .views-field-field-altitude-range>div {
    font-size: 0.8rem;
  }

  @media (max-width: 1500px) {}

  @media (max-width: 1200px) {}

  @media (max-width: 992px) {
    .resort-row {
      flex-direction: column;
    }

    .resort-row__media {
      flex: 0 0 100%;
    }


  }

  @media (max-width: 768px) {
    .resort-row {
      gap: 3 rem;
    }
  }

  @media (max-width: 576px) {}

}


/* 
##############################
############################## */


/* Start The Mini Menu */

.view-id-resort_overview.view-display-id-block_2 {
  overflow: hidden;

  .view-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: rgba(var(--adarkgreen), 1);



    .views-row {
      width: auto;

      a {
        text-decoration: none;
        text-transform: uppercase;
        color: white;
        letter-spacing: 6px;
        transition: all 0.5s ease;
      }

      a:hover {
        color: var(--alightgold);
      }

    }
  }
}





.view-id-resort_overview.view-display-id-block_2 {

  background-color: #163b35;
  background-color: rgba(var(--adarkgreen), 1);
  text-align: center;

}

/* header */
.view-id-resort_overview.view-display-id-block_2 .view-header {

  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 20px;

}

.view-id-resort_overview.view-display-id-block_2 .view-header span {

  color: var(--alightgold);
  color: white;
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  width: 100%;

}

html body .view-id-resort_overview.view-display-id-block_2 .view-header span:hover {
  color: var(--alightgold);
  ;
}

/* sliding container */
.view-id-resort_overview.view-display-id-block_2 .view-content {

  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;


}

.view-id-resort_overview.view-display-id-block_2 .views-row {
  padding-bottom: 10px;
}

.view-id-resort_overview.view-display-id-block_2 .view-header span {
  color: #ffffff;
  transition: color .25s ease;
}

.view-id-resort_overview.view-display-id-block_2 .view-header.is-active span {
  color: var(--alightgold);
}

/* end the Mini menu */



@media (max-width: 1500px) {}

@media (max-width: 1200px) {}

@media (max-width: 992px) {

  .resort-row__media,
  .views-field-field-resort-image picture {
    width: 100%;
  }

}

@media (max-width: 768px) {

  .view-resort-overview.view-display-id-block_2 {
    .view-content {
      /* flex-direction: column; */

      .views-row {
        width: 100%;

      }

      .resort-row {}
    }
  }


}

@media (max-width: 576px) {}



/* Start non destructive tweak to make images scale height */

.view-resort-overview {

  .resort-row {
    align-items: stretch; // ensures columns share height
  }

  .resort-row__media {
    flex: 0 0 45%;
    overflow: hidden;
    display: flex;
  }

  .resort-row__media .views-field,
  .resort-row__media .field-content {
    display: flex;
    width: 100%;
  }

  .resort-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

}

/* End non destructive tweak to make images scale height */