:root {
    --image-container-bg: #00000033;
    --slider-btn-bg: #0f0f0f;
    --slider-btn-shadow:#0f0f0faa ;
    --slider-bg-top: #151515;
    --slider-bg-bottom: #eee;
    --text-color:#eee;
    --text-box-bg: #0f0f0faa;
    --icon-color:#eee;
    --icon-bg: #0f0f0faa;
    --glass-blur:20px;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
    gap: 20px;
    padding: 20px;
}

/* image container */
.fade-compare-container {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--image-container-bg);
}

.fade-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
}

.fade-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade-slider {
    position: absolute;
    bottom: 20px;
    left: 12px;
    right: 12px;
    width: calc(100% - 32px);
    z-index: 10;
    appearance: none;
    height: 10px;
    background: linear-gradient(to right, var(--slider-bg-bottom) 50%, var(--slider-bg-top) 50%);
    background-size: 200% 100%;
    background-position: left; 
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.fade-slider::-webkit-slider-thumb {
    appearance: none;
    width: 30px;
    height: 30px;
    background-color: var(--slider-btn-bg); 
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22444%22%20height%3D%22220%22%20viewBox%3D%220%200%20444%20220%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M32.7158%20142.579C14.311%20131.888%205.1086%20126.542%202.02031%20119.563C-0.673435%20113.476%20-0.673435%20106.524%202.02031%20100.437C5.1086%2093.4577%2014.311%2088.1121%2032.7158%2077.4207L139.626%2015.3165C158.031%204.62517%20167.234%20-0.720489%20174.785%200.0780597C181.371%200.774588%20187.355%204.25037%20191.248%209.64128C195.711%2015.8218%20195.711%2026.5131%20195.711%2047.8958V172.104C195.711%20193.487%20195.711%20204.178%20191.248%20210.359C187.355%20215.75%20181.371%20219.225%20174.785%20219.922C167.234%20220.72%20158.031%20215.375%20139.626%20204.684L32.7158%20142.579Z%22%20fill%3D%22%23EEEEEE%22/%3E%3Cpath%20d%3D%22M411.284%20142.579C429.689%20131.888%20438.891%20126.542%20441.98%20119.563C444.673%20113.476%20444.673%20106.524%20441.98%20100.437C438.891%2093.4577%20429.689%2088.1121%20411.284%2077.4207L304.374%2015.3165C285.969%204.62517%20276.766%20-0.720489%20269.215%200.0780597C262.629%200.774588%20256.645%204.25037%20252.752%209.64128C248.289%2015.8218%20248.289%2026.5131%20248.289%2047.8958V172.104C248.289%20193.487%20248.289%20204.178%20252.752%20210.359C256.645%20215.75%20262.629%20219.225%20269.215%20219.922C276.766%20220.72%20285.969%20215.375%20304.374%20204.684L411.284%20142.579Z%22%20fill%3D%22%23EEEEEE%22/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 2px 6px var(--slider-btn-shadow);
    cursor: pointer;
}

.fade-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    background-color: var(--slider-btn-bg);
    border-radius: 50%;
    cursor: pointer;
}

.fade-slider::-ms-thumb {
    width: 32px;
    height: 32px;
    background-color: var(--slider-btn-bg);;
    border-radius: 50%;
    cursor: pointer;
}

.fade-compare-container:hover .fade-slider {
    opacity: 1;
}

/* icon */
.icon-overlay {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 44px;
    height: 44px;
    background-color: var(--icon-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    color: var(--icon-color);
    font-size: 20px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.fade-compare-container:hover .icon-overlay {
    opacity: 1;
}

/* text box */
.fade-text {
    position: absolute;
    top: 16px;
    right: 18px;
    background-color: var(--text-box-bg);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 16px;
    backdrop-filter: blur(var(--glass-blur));
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s ease;
}

.fade-compare-container:hover .fade-text {
    opacity: 1;
}