.featured-content {
  background: var(--rl-white);
  margin: 0 0.5rem;

  .content {
    background: var(--rl-white);
    border-radius: 1rem;
    overflow-y: hidden;
    padding: 0.6em 0.5em 1em 1em;

    h3 {
      font-size: 1.5rem;
      margin: 0.7rem 0;
    }

    a {
      background: var(--rl-bg-green);
      border-radius: 1rem;
      display: block;
      font-size: 1rem;
      font-weight: 500;
      margin: 1rem auto;
      max-width: 300px;
      min-width: 200px;
      padding: 2px 2rem;
      text-align: center;
      text-decoration: none;
    }
  }

  .radlobby-frame-image img {
    height: inherit !important;
    width: 100% !important;
  }

  &.banner {
    .content {
      > div {
        height: auto;
      }
    }
  }

  &.teaser {
    max-width: unset;

    .content {
      > div {
        height: fit-content;
      }
    }
  }
}

/* Bootstrap 5: Medium devices (tablets, 768px and up) */
@media only screen and (width >= 768px) {
  .featured-content {
    &.banner {
      aspect-ratio: 16 / 8;
      clear: both;
      position: relative;

      .image {
        aspect-ratio: auto 16 / 8;
        position: absolute;
        width: 100%;
      }

      .content {
        left: 4rem;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 425px;

        > div {
          height: auto;
        }
      }
    }

    &.teaser {
      max-width: 425px;

      .content{
        > div {
          height: calc(80px + 150px);
        }
      }
    }
  }
}