@use "../base" as *;
@use "../abstracts" as *;

#block-footer-shipping {
  width: calc(50% - 4px);

  @include breakpoint(medium) {
    max-width: 100%;
    width: calc(25% - 8px);
  }
  @include breakpoint(full) {
    margin-right: 0;
  }

  .shipping {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    border: 1px solid $light-gray;
    width: 100%;
    height: 100%;
    padding: 14px 10px 16px;

    @include breakpoint(medium) {
      padding: 0;
    }

    &__title {
      font-family: $font-primary;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.25rem;
      text-align: center;
      margin: 0 0 2px;

      @include breakpoint(medium) {
        font-size: 1.125rem;
        line-height: 1.375rem;
        margin: 24px 0 4px;
      }
    }

    &__subtitle {
      font-family: $font-primary;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1rem;
      text-align: center;
      margin-bottom: 12px;

      @include breakpoint(medium) {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.125rem;
        margin-bottom: 31px;
      }
    }

    img {
      width: 92px;
      margin: 0 auto 10px;

      @include breakpoint(medium) {
        width: 128px;
        margin-bottom: 32px;
      }
    }
  }
}