@include media-breakpoint-down(sm) {
    h1 {
        font-size: $font-size-base * 4;
        line-height: $font-size-base * 4;
    }
}

.app-store-card-columns {
    column-count: 1;
    @include media-breakpoint-up(md) {
        column-count: 2;
    }
    column-gap: 30px;
}

.settings-card-columns {
    column-count: 1;
    @include media-breakpoint-up(md) {
        column-count: 2;
    }
    @include media-breakpoint-up(xl) {
        column-count: 3;
    }
    column-gap: 30px;
}

.card-app-list {
    // https://stackoverflow.com/a/34115300
    box-shadow: 0 1px 10px rgba(209, 213, 223, 0.5),
      0 1px 2px rgba(209, 213, 223, 0) !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    display: inline-block;
    width: 100%;
  }

.app-name {
    @include media-breakpoint-down(md) {
        font-size: 1.4rem;
    }
    @include media-breakpoint-only(lg) {
        font-size: 1.6rem;
    }
}

@include media-breakpoint-only(xs) {
    .app-icon {
        height: 66px !important;
        width: 66px !important;
        border-radius: 12px !important;
    }
    .installed-app {
        width: calc(50% - 1rem) !important;
    }
    .w-xs-100 {
        width: 100%;
    }
    .app-gallery {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        .app-gallery-screen {
            height: auto; // so it doesn't break on Chrome (i.e. show white padding on top/bottom)
            height: intrinsic; // so it doesn't break on Safari (i.e. show white padding on top/bottom) https://stackoverflow.com/a/64108625
            width: calc(100vw);
        }
    }
}

@include media-breakpoint-only(sm) {
    .app-icon {
        height: 70px;
        width: 70px;
        border-radius: 14px;
    }
    .app-gallery {
        margin-left: calc(-15px - 0.75rem);
        margin-right: calc(-15px - 0.75rem);
        padding-left: 30px;
        padding-right: 30px;
        .app-gallery-screen {
            height: 280px;
        }
    }
}

@include media-breakpoint-only(md) {
    .app-icon {
        height: 80px;
        width: 80px;
        border-radius: 16px;
    }
    .app-gallery {
        margin-left: calc(-15px - 0.75rem);
        margin-right: calc(-15px - 0.75rem);
        padding-left: 30px;
        padding-right: 30px;
        .app-gallery-screen {
            height: 300px;
        }
    }
}

@include media-breakpoint-only(lg) {
    .app-gallery {
        margin-left: calc(-15px - 0.75rem);
        margin-right: calc(-15px - 0.75rem);
        padding-left: 30px;
        padding-right: 30px;
    }
    .app-icon {
        height: 80px;
        width: 80px;
        border-radius: 16px;
    }
}

@include media-breakpoint-up(lg) {
    .app-icon.app-icon-lg {
        height: 140px;
        width: 140px;
        border-radius: 24px;
    }
}
