.image-with-links,
.image-with-links--image {
  position: relative;
  z-index: 1;
  min-height: 350px;

  @media(min-width: 769px){
    min-height: 300px;
  }

  .image-with-links__breadcrumbs {
    position: absolute;
    top: calc(var(--base-radius) + var(--inner));
    left: var(--outer);
    z-index: 2;
    background: var(--theme-color-beige);
    padding: 8px 16px;
    border-radius: var(--base-radius);
  }

  .image__hero__frame{
    &:after{
      content: "";
      background: linear-gradient(to bottom, transparent, var(--overlay-bg));
      height: 50%;
      width: 100%;
      position: absolute;
      bottom: 0;
      opacity: .8;
    }
  }

  .wrapper {
    .image-with-links__breadcrumbs {
      left: 0;
      padding-left: 0;
    }

    .image-with-links__content-overlay{
      padding: 0;
      width: calc(100% - (var(--outer) * 2));
    }
  }

  .image-with-links__content-overlay{
    position: absolute;
    bottom: 0;
    padding: var(--outer);
    width: 100%;

    .image-with-links__headers{
      &:only-child{
        margin-bottom: 30px;

        @media(min-width: 1024px){
          margin-bottom: 60px;
        }
      }

      .title{
        text-transform: none;
        margin: 0 0 var(--line);
        color: var(--theme-color-white);
      }
      .subtitle{
        font-weight: 500;
        @media (max-width: 769px){
          font-size: 16px;
        }
      }
    }
  }

  .image-with-links__links--mobile{
    display: flex;
    text-align: start;
    flex-direction: column;
    margin: var(--outer) 0;

    @media (min-width: 770px){
      display: none;
    }

    .select-wrapper{
      position: relative;
      width: 100%;

      #select-toggle:checked {
        + .select-opener:after{
         transform: translate(-50%) rotate(180deg);
        }

        ~ .image-with-links__links{
          display: flex;
          position: absolute;
          flex-direction: column;
          background-color: var(--BTN-SECONDARY-BG);
          padding: var(--outer);
          gap: 10px;
          border-radius: var(--base-radius);
          z-index: 2;
          margin-top: var(--outer);
          width: 100%;

          .image-with-links__links__search {
            display: none;
          }
        }
      }

      .select-opener {
        height: 100%;
        width: 100%;
        padding: var(--outer);

        &:after{
          background-color: var(--BTN-PRIMARY-BG);
          transform: translate(-50%);
        }
      }
    }
  }

  .image-with-links__links{
    display: none;

    @media (min-width: 770px){
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 22px;

      .image-with-links__links__search{
        grid-column: span 4;
      }
    }
  }

  .image-with-links__search{
    margin-top: var(--outer);

    .image-with-links__links__search{
      width: 100%;
    }

    span{
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: calc(100% - 40px - 16px - 8px);
    }
  }
}

.image-with-links,
.image-with-links--image > * {
  border-radius: 0 0 var(--base-radius) var(--base-radius);
  overflow: hidden;
}