now-in-github-bcb-website/static/scss/about.scss

@import '_colors';
@import 'custom_fonts';

.banner {
    height: 30vh;
    background-image: url('../images/cover-image.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    position: relative;

    &:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba($color: $dark_brown, $alpha: 0.6)
    }

    h3 {
        text-align: center;
        align-self: center;
        font-size: $heading_size;
        color: white;
        z-index: 1;
    }
}

.about-content {
    margin: 50px auto;
    line-height: 1.8;
    letter-spacing: 0.8px;
    color: #808285;
    border-bottom: 1px solid #f1f1f1;

    .inner-container {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;

        @media screen and (max-width: 1024px) {
            flex-direction: column;
		}

        .description {
            width: 60%;
            align-self: center;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            @media screen and (max-width: 1024px) {
                width: 100%;
            }

            p {
                width: 100%;
            }

            mark {
                color: $blue;
            }

            .heading {
                font-weight: bold;
                font-size: $heading_size;
                font-family: archivo-black;
                color: $dark_brown;
            }
        }
    }

    .scene-container {
        overflow: hidden;
        width: 37%;
        background-color: $lightest_gray;
        min-height: 50vh;

        @media screen and (max-width: 1023px) {
            width: 100%;
        }
    }

    object {
        overflow-x: hidden;
        display: none;
        width: 100%;
        height: 100%;

        &.active {
            display: block;
        }
    }

    iframe {
        display: none;

        @media screen and (max-width: 1024px) {
            &.active {
                display: block;
            }
        }
    }

    figure {
        width: 37%;
        align-self: center;
        display: flex;
        
        @media screen and (max-width: 1024px) {
			width: 100%;
		}

        img {
            width: 100%;
            align-self: center;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
        }
    }

    p {
        width: 90%;
        margin: 0 auto 0;
        padding-bottom: 50px;

        @media screen and (max-width: 1024px) {
			margin: 0 auto;
		}
    }

    .features {
        width: 90%;
        margin: 20px auto;

        h3 {
            margin-bottom: 10px;
        }

        p {
            width: 100%;
            padding: 0;
        }

        ul {
            margin-bottom: 20px;
            margin-left: 30px;
        }
    }
}

#our-team {
    width: 90%;
    margin: 30px auto 100px;

    h3 {
        font-size: $heading_size;
        color: $dark_brown;
        text-align: center;
        font-family: archivo-black;

        marked {
            color: $blue;
            display: inline;
        }
    }

    marked {
        color: $blue;
        padding: 10px 0 0;
        text-align: center;
        display: block;
        font-weight: bold;
    }

    .owl-team {
        margin: 50px 0;
    }

    .section-container {
        margin: 0 20px;
    }

    figure {
        width: 100%;
        display: block;
        margin: 0 auto;

        img {
            width: 100%;
        }
    }

    p {
        text-align: center;
        margin-top: 10px;
    }

    .owl-team-btn {
		margin: 20px auto;
		text-align: center;
		padding: 20px 0;

		i {
			font-size: 16px;
			padding: 0 10px;
			color: $blue;
			cursor: pointer;
		}
	}
}