@use 'responsive.scss' as r;

.tsc-image {
    margin: 0 auto;
    width: fit-content;

    img {
        display: block;
        margin: 0 auto;
    }
}

.tsc-gallery {
    display: grid;
    place-items: center center;
    grid-template-columns: 1fr;
    gap: 15px;

    @include r.media-large {
        &.cols-2 {
            grid-template-columns: 1fr 1fr;
        }

        &.cols-3 {
            grid-template-columns: 1fr 1fr 1fr;
        }

        &.cols-4 {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

    .tsc-gallery-img {
        margin: 5px 0;

        a {
            display: block;
            // margin: 0 auto;
            
            img {
                margin: 0 auto;
                display: block;
            }
        }
    }
}

.tsc-image, .tsc-gallery-img {
    .credits {
        font-style: italic;
        float: right;
    }
}

.youtube-video {
    max-width: 100%;
}

.internal-video {
    max-width: 100%;
}