@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

.lcb-wrp {
  display: flex;
  flex-direction: column;
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  flex-direction: column;
  margin: 2rem 0;

  .lcb-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25vh;
    background-image: url('../../images/leaps-panels/leaps-callout.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .lcb-txt {
    h3 {
      font-family: "IBM Plex Sans", sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
    }
    p {
      margin: .5rem 0;
    }
    a i {
      transition: all ease-in-out .3s;
    }
    a:hover {
      border-bottom: none;
      position: relative;
      i {
        padding-left: .5rem
      }
    }
    a::after {
      content: "";
      border-bottom: 2px solid transparent;
      transition: border-color 0.3s ease;
    }
    a:hover::after {
      border-color: #0d57aa;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

@media screen and (min-width: 40rem) {
  .lcb-wrp::before {
    content: "";
    border-top: dotted 6px #0081AA;
    position: absolute;
    top: 5%;
    width: 90%;
    transform: translateX(5%);
  }
  .lcb-wrp {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    .lcb-img {
      width: 39%;
    }
    .lcb-txt {
      width: 59%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      p {
        font-size: 1.25rem;
      }
    }
  }
}