<style>
.ba-release-row {
position: relative;
}
.ba-release-row img {
border-radius: 25px;
}
.ba-lookbook-category-banner {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: start;
align-items: center;
}
.ba-lookbook-category-banner-inner {
text-align: left;
width: 50%;
padding: 25px;
}
.ba-lookbook-category-banner-inner h1,
.ba-lookbook-category-banner-inner p {
color: rgb(60, 64, 67);
}
.ba-lookbook-category-banner-inner h1 {
font-size: clamp(1.3rem, 3vw, 4.5rem);
margin-bottom: 5px;
}
.ba-lookbook-category-banner-inner p {
font-size: clamp(1rem, 2.5vw, 2rem);
}
.lookbook-button,
.lookbook-button:visited,
.lookbook-button:hover,
.lookbook-button:active,
.lookbook-button:focus {
font-size: 16px;
font-weight: 500;
display: inline-block;
color: rgb(60, 64, 67) !important;
border-radius: 4px;
line-height: 24px;
padding: 6px 18px;
border: 2px solid rgb(60, 64, 67);
text-decoration: none;
transition: all 250ms cubic-bezier(0.1, 0.1, 0, 1);
}
.lookbook-button:hover {
color: white !important;
background-color: rgb(60, 64, 67);
text-decoration: none !important;
}
@media screen and (max-width: 768px) {
.ba-lookbook-category-banner-inner {
width: 60%;
}
}
</style>
<div class="ba-lookbook-category-banner">
<div class="ba-lookbook-category-banner-inner">
<h1>View our essential Winter collection</h1>
<p class="lookbook-p">
<a class="lookbook-button" href="https://your.merch.google/lookbook">Discover more</a>
</p>
</div>
</div>
<h1 class="home_h1">Shop by brand</h1>
<script>
require(['jquery', 'jquery/ui', 'slick'], function ($) {
$(document).ready(function() {
var init = {
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,
infinite: true,
arrows: true,
dots: false
};
$(function () {
var win = $(window);
var slider = $(".ba-brand-item-container .pagebuilder-column-line ");
win.on("load resize", function () {
if (win.width() < 750) {
slider.not(".slick-initialized").slick(init);
} else if (slider.hasClass("slick-initialized")) {
slider.slick("unslick");
}
});
});
});
});
</script>
<style>
.ba-brand-item {
padding: 0 3vw 40px 3vw !important;
}
</style>
