@media (min-width: 580px){
   .scrollbar-item{min-width: calc(50% - 15px);}
    .grid-list{grid-template-columns: 1fr, 1fr;}

    .hero{
        display: grid;
        padding-inline-start: 20px;
        justify-content: flex-start;
        align-items: center;
    }

    .offer .grid-list{grid-template-columns: 1fr;}

    .product-card .card-banner{position: relative;}
    .product-card .card-banner .hover,
    .product-card .card-action-btn{display: block; position: absolute;}
    .product-card .card-banner .hover{top: 0; left: 0;}

    .product-card:is(:hover, :focus) .default,
    .product-card .hover{opacity: 0;}

    .product-card .default,
    .product-card:is(:hover, :focus-within) .hover{opacity: 1;}

    .product-card .card-action-btn{
        top: 15px;
        right: 15px;
        font-size: 20px;
        background-color: var(--white);
        border: 1px solid var(--platium);
        border-radius: 50%;
        padding: 12px;
        transition: var(--transition-1);
        opacity: 0;
        color: var(--eerie-black);
    }

    .product-card .card-action-btn:is(:hover, :focus){
        background-color: #f092b5;
        border-color: #f092b5;
        color: var(--white);
    }

    .product-card:is(:hover, :focus-within) .card-action-btn{
        opacity: 1;
    }

    .cta .img{width: 250px;}
    .cta .h2{--fs-2: 3.2rem;}
    .brand .scrollbar-item{min-width: 25%;}
    .footer-top .container{grid-template-columns: 1fr 1fr;}
}

@media (min-width: 768px){
    .scrollbar-item{min-width: calc(33.33% - 20px);}
    .grid-list{grid-template-columns: repeat(3, 1fr);}

    .hero{
        aspect-ratio: 1512 / 784;
        padding-inline-start: 10%;
    }
    .hero-title{font-size: 8rem;}
    .hero-text{font-size: 2.4rem;}

    .offer .grid-list{grid-template-columns: repeat(3, 1fr);}
    .cta-banner{display: block;}
    .cta .container{
        display: grid;
        grid-template-columns: 1fr 0.75fr;
        align-items: flex-end;
    }

    .footer-bottom .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 992px){
    .container{padding-inline: 30px;}

    .scrollbar-item{min-width: calc(20% - 24px);}

    .nav-toggle-btn, .navbar-action-btn{display: none;}

    .header{
        --color: var(--white);
        background: none;
    }
    .header.active{
        --color: var(--black);
        background:var(--white);
    }

    .header .logo, .header .action-btn{color:var(--color);}
    .header .action-btn.user{display: block;}
    /* .logo{font-size: 3.8rem;} */

    .navbar, .navbar.active{
        all : unset; /* 세팅 초기화 */
        margin-inline-end: auto;
    }

    .navbar-list{display: flex; gap: 10px;}
    .navbar-link{
        color:var(--color);
        --fs-6: 1.7rem;
        font-weight: var(--fw-700);
        transition: var(--transition-1);
    }

    .header.active .navbar-link:is(:hover, :focus){
        color: #f092b5;
    }

    .hero{margin-block-start: 0;}
    .hero-title{font-size: 10rem;}
    .hero-text{font-size: 2.6rem;}

    .category-card .h3{--fs-3: 2rem;}
    .service .grid-list{grid-template-columns: repeat(4, 1fr);}
    .service-card .h3{--fs-3: 2.4rem;}

    .brand , .scrollbar-item{min-width: 20%;}
    .footer-top .container{grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;}
}

@media (min-width: 1200px){
    .hero-title{font-size: 14rem;}
    .hero-text{font-size: 2.8rem;}

    .grid-list{grid-template-columns: repeat(4, 1fr);}

    .cta-content{padding-block: 100px;}

    :is(.brand, .footer) .container{
        max-width: 1200px;
        width: 100%;
        margin-inline: auto;
    }

    .footer{padding-block-start: 40px;}
}