input[type="radio"] {
    display: none
}

.slider {
    width: 100%;
    aspect-ratio: 1.2/1;
    max-height: 100vh;
    background-color: transparent;
    position: relative;

    & .slides {
        position: relative;
        height: 90%;
        display: flex;
        overflow: hidden;

        & .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 0 60px;
            opacity: 0;
            display: flex;
            transition: all .3s ease;

            & img {
                width: 100%;
                max-height: 100%;
                margin: auto;
                object-fit: contain;
                transition: all .5 ease-in;
                pointer-events: none
            }

            &.active {
                opacity: 1
            }
        }
    }

    & .arrow {
        position: absolute;
        text-decoration: none;
        height: 50px;
        width: 50px;
        top: 50%;
        transform: translateY(-50%);
        opacity: .5;
        transition: all 0.3s ease-in;
        filter: var(--invert);

        &:hover {
            opacity: 1
        }

        &.left {
            left: 0
        }

        &.right {
            right: 0
        }
    }

    & .radios {
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        & .radio {
            width: 16px;
            height: 16px;
            border: 2px solid #666;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: all .3s ease-in;
            filter: var(--invert);

            &:hover {
                background-color: #666;
                border-radius: 20%
            }

            &.active {
                background-color: #666
            }
        }
    }
}