team-overview {
    input {
        background: none;
        width: 100%;
        color: var(--secondary-colour);
        border: none;
    }

    img {
        display: block;
        width: 100%;
        height: 400px;
        transition: .2s;
        object-position: center;
        object-fit: cover;
        margin-bottom: 25px;
    }

    >div.default-grid {
        img {
            grid-column: 1/-1;
            min-width: 0;
            width: 100%;
            aspect-ratio: 2.5/1;
            object-position: top;
            object-fit: cover;
        }

        team-card {
            position: relative;
            transition: box-shadow .15s ease, transform .5s ease-in-out 0s !important;
            transform: rotateY(0deg);
            transform-style: preserve-3d;

            &[active] {
                transform: rotateY(180deg) scale(1.025) !important;

                &::after,
                >div.contact {
                    opacity: 1;
                }

                >div.contact {
                    pointer-events: all;
                }

                >h3,
                >div.content,
                &::before {
                    opacity: 0;
                }
            }

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 110%;
                height: 110%;
                background: color-mix(in srgb, var(--red) 25%, transparent);
                backdrop-filter: blur(5px);
                z-index: 5;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0s;
                transition-delay: .25s;
            }

            >div.contact {
                --size: 2.5rem;
                position: absolute;
                display: flex;
                gap: 1rem;
                box-sizing: border-box;
                inset: 50%;
                height: var(--size);
                transform: translate(-50%, -50%) scaleX(-1);
                opacity: 0;
                transition: opacity 0s;
                transition-delay: .25s;
                z-index: 6;
                width: fit-content;
                pointer-events: none;

                >a {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    background: white;
                    border-radius: 5rem;
                    white-space: nowrap;
                    box-sizing: border-box;
                    transition: transform .15s ease;
                    color: var(--red);
                    text-decoration: none;
                    aspect-ratio: 1;

                    &::before {
                        content: '';
                        width: var(--size);
                        aspect-ratio: 1;
                        flex-shrink: 0;
                        background: var(--red);
                        mask-size: 60%;
                        mask-position: center;
                        mask-repeat: no-repeat;
                    }

                    &.email::before {
                        mask-image: url(/icons/mail.svg);
                    }

                    &.phone::before {
                        mask-image: url(/icons/phone.svg);
                    }

                    &.linkedin::before {
                        mask-image: url(/icons/linkedin.svg);
                    }

                    &:hover {
                        transform: scale(1.15);
                    }
                }
            }

            >h3 {
                transition: opacity 0s;
                transition-delay: .25s;
            }

            >div.content {
                opacity: 1;
                transition: opacity 0s;
                transition-delay: .25s;
            }
        }
    }
}