[id^="image-overlay-link-block"] {
  flex-grow: 1;
  flex-shrink: 1;

  a {
    width: 100%;

    .iol--wrapper {
      width: 100%;
      position: relative;
      overflow: clip;

      .iol--overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: all 0.3s;
        transform: translateY(calc(-100% + 43px));
      }

      .iol--link-title {
        padding: 12px 16px;
        margin: 0;
        color: #fff !important;
        transition: all 0.3s;
        position: absolute;
        top: 0;
        text-align: center;
        width: fit-content;
        max-width: 100%;
      }
    }

    .landscape-img,
    .iol--wrapper:has(.landscape-img) {
      aspect-ratio: 320 / 210;
      max-width: 320px;
      margin: auto;
      width: 100%;
      height: auto;
    }

    .portrait-img,
    .iol--wrapper:has(.portrait-img) {
      aspect-ratio: 255 / 300;
      max-width: 255px;
      margin: auto;
      width: 100%;
      height: auto;
    }



  }

  .opaque-teal-overlay {
    background-color: #339999;
  }

  .translucent-teal-overlay {
    background-color: #339999bf;
  }

  .translucent-black-overlay {
    background-color: #444444bf;
  }

  a:hover {
    .iol--overlay {
      transform: translateY(0);
    }

    .iol--link-title {
      font-size: 35px;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }


  @media (max-width: 991px) {
    a .iol--wrapper {
        .iol--overlay {
            transform: translateY(0);
        }
        
        .iol--link-title {
            font-size: 35px;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
}