/* 
********************************
TABLET:
********************************
*/

@media (max-width: 850px) {
  .card {
    max-width: 38rem;
    height: 21.63rem;
  }

  /* Card Left: Picture */
  .card-container-img {
    width: 14.31rem;
  }

  .card__image {
    height: 21.63rem;
    object-fit: fill;
  }

  /* Card Right: Text Content */
  .card-container-text {
    max-width: 23.69rem;
    padding: 2.563rem 2.125rem;
  }

  /* Share Menu Component */
  .share-component {
    padding: 1.063rem;
    width: 12.5rem;
    justify-content: center;
    gap: 0.9375rem;
  }
}

/* 
********************************
MOBILE:
********************************
*/
@media (max-width: 675px) {
  .card {
    flex-direction: column;
    max-width: 20.44rem;
    height: 33.63rem;
  }
  /* Card Left: Picture */
  .card-container-img {
    width: 20.44rem;
    height: 12.5rem;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    margin-bottom: var(--32px);
  }

  .card__image {
    width: 100%;
    height: 12.5rem;
  }

  /*Text Content */
  .card-container-text {
    gap: 0;
    padding: 0 var(--30px) var(--18px);
  }
  .card__title {
    margin-bottom: var(--24px);
  }
  .card__description {
    margin-bottom: 3rem;
  }

  /* Card Footer */
  .card__footer {
    position: relative;
  }

  .card__btn {
    position: relative;
    z-index: 3;
  }

  /* Share Menu Component */
  .relative {
    position: static;
  }

  .share-component {
    width: 20.44rem;
    height: 4.75rem;

    /*Top and Left properties cannot be 0 due to padding in card-container-text class*/
    top: -1.125rem;
    left: -1.875rem;

    border-top-left-radius: 0;
    border-top-right-radius: 0;

    gap: var(--24px);

    box-shadow: 0;
  }

  .share-component__social-icons-container {
    margin-right: 4rem;
  }

  /* Turn off speech tail decor */
  .share-component::after {
    display: none;
  }
}