.detail-grid a, .detail-grid a:link, .detail-grid a:visited {
    color: inherit;
	text-decoration:none;
}

.detail-grid {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
}

@media only screen and (max-width: 768px) {
   
    .detail-grid {
        -webkit-column-gap: 28px;
        -moz-column-gap: 28px;
        column-gap: 28px;
        grid-template-columns: [page-start] 0 repeat(4, [grid] 1fr) 0 [page-end];
    }
}

.detail-grid__title,
.detail-grid__product-cta {
    font-family: "Google Sans", sans-serif;
    font-style: normal;
}


.detail-grid__title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 20px;
    text-transform: uppercase;
}

.detail-grid__product-cta {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    line-height: 20px;
}


:root {
    --bw: 1vw;
}
@media only screen and (min-width: 1601px) {
    :root {
        --bw: 16px;
    }
}

.detail-grid {
    --product-image-width: calc((100 * var(--bw) + 24px) * 0.2 - 24px - 2 * 26px);
    position: relative;
}
@media only screen and (max-width: 768px) {
    .detail-grid {
        --product-image-width: calc(100vw - 128px);
    }
}
.detail-grid__title {
    grid-column: 4 / span 11;
    margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
    .detail-grid__title {
        grid-column: 1 grid/span 4;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__title {
        margin-bottom: 26px;
    }
}
.detail-grid__product {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    text-decoration: none;
}
.detail-grid__product:nth-of-type(4n + 1) {
    grid-column: 4 / span 6;
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product:nth-of-type(4n + 1) {
        grid-column: 4 / span 12;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product:nth-of-type(4n + 1) {
        grid-column: 1 grid/span 4;
    }
}
.detail-grid__product:nth-of-type(4n + 2) {
    grid-column: 10 / span 6;
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product:nth-of-type(4n + 2) {
        grid-column: 16 / span 12;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product:nth-of-type(4n + 2) {
        grid-column: 1 grid/span 4;
    }
}
.detail-grid__product:nth-of-type(4n + 3) {
    grid-column: 16 / span 6;
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product:nth-of-type(4n + 3) {
        grid-column: 4 / span 12;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product:nth-of-type(4n + 3) {
        grid-column: 1 grid/span 4;
    }
}
.detail-grid__product:nth-of-type(4n + 4) {
    grid-column: 22 / span 6;
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product:nth-of-type(4n + 4) {
        grid-column: 16 / span 12;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product:nth-of-type(4n + 4) {
        grid-column: 1 grid/span 4;
    }
}
@media only screen and (min-width: 1121px) {
    .detail-grid__product:hover::before {
        box-shadow: 0 3px 17px rgba(0,0,0,0.15);
        bottom: calc(-44px - 20px - var(--product-image-width) * -0.08756);
    }
    .detail-grid__product:hover .detail-grid__product-image {
        -webkit-transform: scale(0.90206) translateZ(0);
        transform: scale(0.90206) translateZ(0);
    }
    .detail-grid__product:hover .detail-grid__product-name {
        -webkit-transform: translateY(calc(var(--product-image-width) * -0.08756));
        transform: translateY(calc(var(--product-image-width) * -0.08756));
    }
    .detail-grid__product:hover .detail-grid__product-cta-wrapper {
        opacity: 1;
        -webkit-transform: translateY(calc(var(--product-image-width) * -0.08756));
        transform: translateY(calc(var(--product-image-width) * -0.08756));
        transition: opacity 0.5s 0.2s, -webkit-transform 0.5s;
        transition: opacity 0.5s 0.2s, transform 0.5s;
        transition: opacity 0.5s 0.2s, transform 0.5s, -webkit-transform 0.5s;
        visibility: visible;
    }
}
@media only screen and (min-width: 1121px) {
    .detail-grid__product:nth-of-type(n + 5) {
        margin-top: 80px;
    }
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product:nth-of-type(n + 3) {
        margin-top: 40px;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product:nth-of-type(n + 1) {
        margin-top: 20px;
    }
}
.detail-grid__product::before {
    background: #fff;
    border-radius: 10px;
    bottom: 0;
    /*box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.15);*/
	box-shadow: 0 1px 2px 1px rgba(0,0,0,0.15);
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: box-shadow 0.5s, bottom 0.5s;
}
.detail-grid__product-index {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 9px 18px 0;
    position: relative;
    text-align: right;
    width: 100%;
}
.detail-grid__product-image {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    height: calc(var(--product-image-width) * 0.89401);
    -o-object-fit: contain;
    object-fit: contain;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    width: var(--product-image-width);
}
.detail-grid__product-name {
    align-items: center;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    padding: 0 18px;
    position: relative;
    text-align: center;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    width: 100%;
}
@media only screen and (min-width: 1121px) {
    .detail-grid__product-name {
        min-height: 95px;
    }
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product-name {
        min-height: 75px;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product-name {
        padding: 26px 20px 6px;
    }
}
.detail-grid__product-cta-wrapper {
    position: relative;
}
@media only screen and (min-width: 1121px) {
    .detail-grid__product-cta-wrapper {
        left: 0;
        position: absolute;
        right: 0;
        opacity: 0;
        text-align: center;
        top: 100%;
        transition: opacity 0.25s, visibility 1ms 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.25s, transform 0.5s, visibility 1ms 0.5s;
        transition: opacity 0.25s, transform 0.5s, visibility 1ms 0.5s, -webkit-transform 0.5s;
        visibility: hidden;
    }
}
@media only screen and (max-width: 1120px) and (min-width: 769px) {
    .detail-grid__product-cta-wrapper {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 768px) {
    .detail-grid__product-cta-wrapper {
        padding-bottom: 18px;
    }
}
.detail-grid__product-cta {
    align-items: center;
    border-radius: 100px;
    color: #8bc34a;
    display: inline-flex;
    height: 44px;
    padding: 0 24px;
    text-align: center;
    transition: background 0.2s, border 0.2s;
}
.detail-grid__product-cta:hover,
.detail-grid__product-cta:focus {
    background: #8bc34a;
	color:#FFF;
    outline: none;
}
@media only screen and (min-width: 1121px) {
    .detail-grid__product-cta {
        border: 1px solid #dadce0;
    }
    .detail-grid__product-cta:hover,
    .detail-grid__product-cta:focus {
        border: 1px solid #dadce0;
    }
}