﻿@import '../../Styles/abstracts/_colors.scss';
@import '../../Styles/abstracts/_mixins.scss';
@import '../../Styles/abstracts/_functions.scss';
@import '../../Styles/abstracts/_media-queries.scss';

.page-container {
    @include PageContainer;
}

.page-main-title {
    @include PageMainTitle;
}

.page-desc {
    @include PageDescription;
}

.section-card {
    @include SectionCard;
}

.section-card-txt {
    @include SectionCardText;
}

.image-container {
    @include ImageContainer;
}

.image {
    @include Image;
    width: rem2(600px);
}

::deep a {
    color: $bit-color-primary;
}

.image-container {
    img {
        width: 80%;
    }
}

.row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid $White;
    padding-bottom: rem2(10px);
    margin-bottom: rem2(10px);
}

.api-image-container {
    display: flex;
    justify-content: center;
    height: 350px;
}

::deep {
    .bit-drp {
        width: rem2(150px);
    }

    .grid-item {
        overflow: auto;
        width: rem2(550px);
        min-height: 21rem;
        position: relative;
        padding: rem2(28px);
        word-wrap: break-word;
        border-radius: rem2(4px);
        background-clip: padding-box;
        box-shadow: $bit-box-shadow-callout;
        background-color: $bit-color-background-primary;

        &.md {
            min-height: 24rem;
        }

        &.lg {
            min-height: 28rem;
        }

        @include lt-xl {
            &.md {
                min-height: 27rem;
            }

            &.lg {
                min-height: 33rem;
            }
        }

        @include lt-lg {
            &.md {
                min-height: 30rem;
            }

            &.lg {
                min-height: 37rem;
            }
        }
    }
}
