*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family: 'Noto Sans JP', sans-serif;
    line-height:1.6;
}

img {
    max-width: 100%;
    display:block;
}

h1,h2,h3,p {
    margin:0;
}

section{
    padding:7rem 0;
}

.container {
    width:85%;
    max-width:65em;
    margin:0 auto;
}

.secondary-title{
    color:rgb(138, 174, 228);

}

.split{
    display:flex;
    gap:1em;
    flex-wrap:wrap;
    justify-content: center;
}
.split>*{
    flex-basis:30%;
    min-width:15em;
}


.spacing>*+*{
    margin-top: var(--spacer,2rem);
}

.btn {
    display:inline-block;
    text-decoration: none;
    color: var(--clr-text,white);
    font-weight:700;
    text-transform: uppercase;
    font-size: 1.125rem;
    padding: .5rem 1.25em;
    background: var(--clr-accent,blue);
    border-radius: .25em;
    transition:tranform 250ms ease-in-out,opacity 250ms linear;
}

.btn:hover,.btn:focus{
    transform: scale(1,1);
    opacity: .9;
}

.primary-title{
    font-size:4rem;
    font-size: clamp(3rem,(5vw+1rem),4.5rem);
    line-height:1;
    text-transform:uppercase;
}

.section-title{
    text-align:center;
    font-size:clamp(2.5rem,(5vw+1rem),4rem);
    line-height:1;
    color:#17353d;
    margin-bottom:5rem;
}

.hero{
    color:white;
    text-align:center;
    padding:15em 0;
    background-image: url(./shoe-images/shoe-3.png),radial-gradient(grey,black);
    background-blend-mode:multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    --clr-accent:#faa700;
}

.featured {
    background:#eee;
}

.featured__item {
    display: block;
    position: relative;
    transform: scale(.85);
    transition: transform 250ms ease-in-out;
    text-decoration: wavy;
    color:#333;
    text-align:center;
    line-height: 1.2;
}

.featured__item:hover,.featured__item:focus{
    transform:scale(1);
}

.featured__item:hover .featured__details, .featured__item:focus .featured__details{
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 5em rgba(red, green, blue, alpha);
}


.featured__details{
    display:block;
    font-weight: 700;
    font-size:2.5rem;
    opacity:0;
    transition: opacity 250ms linear;
}

.featured__item::after{
    content:'';
    position: absolute;
    top:10%;
    left:10%;
    padding: 75% 75% 0 0;
    border-radius: 50%;
    background: #2193b0;
    z-index: -1;
}

.product {
    background: radial-gradient(var(--clr-inner,limegreen),var(--clr-outer,purple));
    padding:3em;
    border-radius: 1em;
    margin-bottom: 5em;
    text-align:center;
}

.product__image{
    margin:-5em 0 0 0;
}

@media screen and (min-width:45em) {

    .product{
        text-align: left;
        margin-bottom:9em;
    }

    .product__title{
        margin:0;
    }

    .product__image{
        float: right;
        width:65%;
        shape-outside: url(./shoe-images/shoe-1.png);
        shape-margin: 1em;
        margin:0 -5em 0 0;
    }

    .product.shoe-left .product__image {
        float:left;
        shape-outside: url(./shoe-images/shoe-2.png);
        margin:0 0 0 -5em;
        shape-margin: 2em;
    }
}

.product__title{
    font-size:clamp(3rem,calc(5vw + 1rem),5.5rem);
    text-transform: uppercase;
    line-height:1;
    color:white;
    text-shadow: 0 0 .2em rgba(black,.2);
}

.shoe-red{
    --clr-inner:red;
    --clr-outer:orange;
    --clr-accent:limegreen;
}

.shoe-white{
    --clr-inner:#fce4b3;
    --clr-outer:#e48d00;
    --clr-accent:#a1173c;
}

.shoe-blue{
    --clr-inner:#6dd5ed;
    --clr-outer:#eac886;
    --clr-accent:#008951;
}