@use "../../assets/stylesheets/abstracts/mixins" as *;

.card {
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(7px);
  /* Note: backdrop-filter has minimal browser support */

  border-radius: 33px;
  padding: 63px 55px;

  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    min-height: 99px;
  }

  h3 {
    margin-top: 63px;
    margin-bottom: 16px;
  }

  h3,
  p {
    text-align: center;
  }

  &:nth-of-type(1) {
    grid-column: 1/5;
  }
  &:nth-of-type(2) {
    grid-column: 5/9;
  }
  &:nth-of-type(3) {
    grid-column: 9/13;
  }

  @include for-mobile {
    padding: 46px 30px;

    &:nth-of-type(1) {
      grid-column: 1/7;
    }
    &:nth-of-type(2) {
      grid-column: 1/7;
    }
    &:nth-of-type(3) {
      grid-column: 1/7;
    }
  }
}
