/* Attraction css */

.single-attraction {
    &-border {
        border: 2px solid rgba($steam-color, .7);
    }
    &:hover {
        .single-attraction {
            &-thumb {
                img {
                    @include transform(scale(1.1));
                }
            }
        }
    }
    &-thumb {
        overflow: hidden;
        img {
            border-radius: 20px 20px 0 0;
            @include transition(.4s);
            @include responsive(allPhone) {
                width: 100%;
            }
        }
    }
    &-contents {
        border: 1px solid rgba($steam-color, .7);
        padding: 20px;
        border-radius: 0 0 20px 20px;
        &-title {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            margin: -4px 0 0;
        }
        &-para {
            font-size: 16px;
            line-height: 24px;
            color: var(--paragraph-color);
            margin-top: 12px;
        }
    }
}

.single-attraction-two {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    @include transition(.3s);
    &:hover {
        .single-attraction-two {
            &-contents {
                visibility: visible;
                opacity: 1;
                z-index: 9;
                bottom: 0;
            }
        }
    }
    &-thumb {
        img {
            border-radius: 20px;
            @include responsive(allPhone) {
                width: 100%;
            }
        }
    }
    &-contents {
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
        background-color: rgba($black, .3);
        backdrop-filter: blur(10px);
        padding: 20px 10px;
        visibility: hidden;
        opacity: 0;
        @include transition(.3s);
        max-height: 100%;
        overflow-y: auto;
        scrollbar-color: var(--secondary-color) transparent;
        -ms-overflow-style: none;
        -moz-appearance: none !important;
        scrollbar-width: thin;
        &::-webkit-scrollbar {
            width: 5px !important;
            height: 5px;
            border: none;
            border-radius: 10px;
            &-track {
                background-color: #C2D2E4;
                border-radius: 10px;
            }
            &-thumb {
                background-color: var(--secondary-color);
                border-radius: 10px;
            }
        }
        &-title {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            margin: -4px 0 0;
            color: $white;
            @include transition(.2s);
            &:hover {
                color: var(--secondary-color);
            }
        }
        &-para {
            font-size: 16px;
            line-height: 24px;
            color: var(--paragraph-color);
            margin-top: 12px;
            color: rgba($white, .8);
        }
    }
}