@use '../utilities/main_utilities' as *;
// CSS Styling for test page, before standardising and making mixins/modules/components for the bits

.image-over-block{}
.image-over-block__block{
    // remsFromPercent as design uses 1300px container, I'm using 1080 atm
    padding: #{remsFromPercent(8.4)}rem  #{remsFromPercent(10.7)}rem !important; // .important to prio over row [class^=col] for now
    background-color: lightblue;
}
.image-over-block__image{
    position: absolute;
    bottom:50%;
    transform: translate(0, 50%);
    right:0;

    @include media($media-lg){
        bottom:-20%;
        transform: translate(0, -20%);
    }
}

.tag--social{
    border-radius: 999px; padding: 3px 6px; font-size: 16px; height: 24px; width: 24px;
    top: 0; overflow: hidden; text-decoration: none;
}

.sf-header{
    border-bottom: 1px solid green; padding-top: 18px;padding-bottom: 18px;
}



.slide__dots{
    margin-top: 20px;
}
.slide-dot, .swiper-pagination-bullet{
    display: inline-block; width: 16px; height: 16px;
    border:1px solid transparent; border-radius: 999px; position: relative;
}
.slide-dot__inner, .swiper-pagination-bullet{
    width: 8px; height: 8px; background-color: grey; border-radius: 999px;
    position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);
}
.slide-dot--active, .swiper-pagination-bullet-active{
   border-color: black;
}
.slide-dot--active .slide-dot__inner, .swiper-pagination-bullet-active .slide-dot__inner{
    background-color: black;
}


// Gallery
.gallery-fancy{
    height: 300px;
    overflow: hidden;
}
.gallery-fancy--show{
    height: auto;
    overflow: unset;
}
.gallery-fancy:before{
    content:"";
    position: absolute;
    width: 100%;
    height: 10%;
    background: linear-gradient(360deg, #f8f9fa, transparent);
    bottom: 0;
}
.gallery-fancy--show:before{
    display: none;
}
.gallery-fancy .col img{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

// Team
.team-block{
    margin-bottom: 60px;
}
.team-block__image{
    margin-bottom: 20px; border-radius: 15px; width: 100%;
}
.team-block__name{
    margin-bottom: 8px; font-size: 26px; line-height: 28px; color: #242322;
    font-weight: bold;
}
.team-block__role{
    font-size: 18px; font-weight: bold; line-height: 20px;
}

@media(min-width: 768px){
    .team-block{
        margin-bottom: 60px;
    }
    .team-block__image{
        margin-bottom: 24px; border-radius: 15px;
    }
    .team-block__name{
        margin-bottom: 10px; font-size: 30px; line-height: 32px;
        font-weight: bold;
    }
}


// Use above another container where elements are supposed to be off the page on higher screen width
.container-overflow{
    max-width: 100%;
    overflow: hidden;
}

.container-overflow .container{
    padding: 0;
}