@import "./config";

.c-gallery {
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    position: relative;
}

.c-gallery__byline {
    @include font-size(12px);
}

.c-gallery__desc {}

.c-gallery__image-main {
    @include gallery-slice-at-large(){
        display: table-cell;
        vertical-align: middle;
        width: 75%;
    }
}

.c-gallery__image-strip {
    // This removes some funky whitespace margin
    line-height: 0;
}
.c-gallery__image-strip-item {
    display: inline-block;
    // Used by .c-gallery__image-strip-remaining
    position: relative;
}
.c-gallery__image-strip--small {
    @include max-screen( $GALLERY_MEDIUM_BREAKPOINT ){
        .c-gallery__image-strip-item {
            width: 33.33%;
        }
    }
}
.c-gallery__image-strip--medium {
    @include screen( $GALLERY_MEDIUM_BREAKPOINT, $GALLERY_LARGE_BREAKPOINT ){
        .c-gallery__image-strip-item {
            width: 33.33%;
        }
    }
}
.c-gallery__image-strip--large {
    @include gallery-slice-at-large(){
        .c-gallery__image-strip-item {
            display: block;
            width: 100%;
        }
    }
    @include gallery-slice-at-large(){
        display: table-cell;
        vertical-align: middle;
        width: 25%;
    }
}
.c-gallery__image-strip-item__remaining {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;

    & > div {
        position: relative;
        top: 50%;
        @include vendor-prefix(transform, translateY(-50%));
    }

}
.c-gallery__image-strip-item__remaining-prefix {}
.c-gallery__image-strip-item__remaining-value {}

.c-gallery__images {
    @include gallery-slice-at-medium(){
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
    @include gallery-slice-at-large(){
        width: 55%;
    }
}
.c-gallery__images-table {
    @include gallery-slice-at-large(){
        display: table;
        table-layout: fixed;
        width: 100%;
    }
}

.c-gallery__link {}
.c-gallery__link--article {
    background-color: rgba(255,255,255,0.01);
    bottom: 0;
    font-size: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.c-gallery__meta {

}

.c-gallery__meta-item {
    display: inline-block;
}

.c-gallery__text {
    @include gallery-slice-at-medium(){
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
    @include gallery-slice-at-large(){
        width: 45%;
    }
}

.c-gallery__title {}

.c-gallery__visible {}
.c-gallery__visible--small {
    @include gallery-slice-at-medium(){
        display: none;
    }
}
.c-gallery__visible--medium {
    @include max-screen( $GALLERY_MEDIUM_BREAKPOINT ){
        display: none;
    }
}

.c-gallery__wrapper-table {
    @include gallery-slice-at-medium(){
        display: table;
        table-layout: fixed;
        width: 100%;
    }
}