.o_website_tag {
    vertical-align: middle;
    @for $size from 1 through length($o-colors) {
        &.o_tag_color_#{$size - 1} {
            $background-color: white;
            // no color selected
            @if $size == 1 {
                & {
                    color: black;
                    background-color: $background-color;
                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
                }
            } @else {
                $background-color: nth($o-colors, $size);
                & {
                    color: white;
                    background-color: $background-color;
                }
            }
            @at-root a#{&} {
                &:hover {
                    color: color-contrast($background-color);
                    background-color: darken($background-color, 10%);
                }
            }
        }
    }
}

.o_website_record {
    transition: box-shadow ease-in 0.1s;

    &:hover {
        box-shadow: 0 5px 25px -10px black;
    }

    .o_website_image {
        object-fit: cover;
    }
}

.o_website_grid {
    .o_website_record {
        grid-template-rows: auto 1.5em 8em;

        .o_website_tags {
            grid-row: 2;
        }

        .card-body {
            grid-row: 3;
        }

        .o_website_image {
            height: 12em !important;
        }
    }
}

.o_website_list {
    .o_website_record {
        grid-template-columns: 10% 65% 25%;
        height: 6em;

        .o_website_tags {
                grid-column: 3;
                grid-row: 1;
        }

        .card-body {
            grid-column: 2;
            grid-row: 1;
        }
    }
}

.o_website_record_page {
    .o_website_html {
        padding: 0 3vw;
    }

    .o_website_image {
        max-height: 90vh;
        object-fit: contain;
    }
}