/* CSS Document */
#detail{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin: clamp(32px, calc(48 / 1200 * 100vw), 48px) 0 0;
overflow: hidden;
&>*{
grid-column: 2;
}
}
#detailHeader{
display: contents;
&>*{
grid-column: 2;
}
& > div:has(h2){
position: relative;
display: grid;
grid-template-columns: 11px 1fr;
grid-column-gap: 16px;
&:before{
grid-row: 1 / 3;
content: "";
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') repeat-y;
-webkit-mask-position: center top;
-webkit-mask-size: 11px;
}
}
& h2{
grid-column: 2;
display: grid;
font-weight: 700;
font-size: clamp(20px, calc(32 / 1200 * 100vw), 32px);
letter-spacing: 0.1em;
&:before{
content: attr(data-ruby);
font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
}
}
& h3{
grid-column: 2;
color: var(--color-theme);
font-weight: 700;
font-size: clamp(18px, calc(20 / 1200 * 100vw), 20px);
letter-spacing: 0.1em;
}
}
#detailPhoto {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) 16px;
margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
@media (min-width: 992px) {
grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}
& ul:not(.slick-slider) {
justify-self: center;
display: grid;
width: min(calc(100% - 32px), 714px);
& li {
grid-column: 1;
grid-row: 1;
margin: 0 12px;
}
}
& img {
aspect-ratio: 1 / 0.667;
object-fit: cover;
}
&.fitContain img {
object-fit: contain;
}
}
#detailPhotoSlide {
display: contents;
& li {
display: none;
&:before {
content: attr(data-caption);
min-height: 40px;
padding: 16px 0;
pointer-events: none;
z-index: 1;
}
&[data-caption=""]:before {
content: none;
}
& a {
grid-column: 1;
grid-row: 1;
}
&.slick-slide {
display: grid;
overflow: hidden;
}
}
& .slick-list {
justify-self: center;
grid-column: 1 / 4;
width: min(calc(100% - 32px), 714px);
overflow: visible;
}
& .slick-slide {
margin: 0 12px;
}
& .slick-arrow {
all: unset;
position: relative;
grid-row: 2;
aspect-ratio: 1;
align-self: center;
width: 32px;
background: #fff;
color: var(--color-variable);
font-size: 0;
cursor: pointer;
}
& .slick-arrow:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 1;
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background-size: 24px;
border-radius: 100%;
}
& .slick-prev {
grid-column: 1;
}
& .slick-prev:before {
transform: scale(-1, 1);
}
& .slick-next {
grid-column: 3;
}
}
#detailPhotoSlideNav{
& li {
cursor: pointer;
}
& a {
pointer-events: none;
}
& .slick-slide {
margin: 0 5px;
}
& .slick-track {
&:not(:has(li:nth-child(4))) {
transform: none !important;
}
@media (min-width: 576px) {
&:not(:has(li:nth-child(6))) {
transform: none !important;
}
}
@media (min-width: 992px) {
&:not(:has(li:nth-child(8))) {
transform: none !important;
}
}
@media (min-width: 1200px) {
transform: none !important;
}
}
}
#detaiLink{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 24px 16px;
margin: clamp(32px, calc(48 / 1200 * 100vw), 48px) 0 clamp(48px, calc(64 / 1200 * 100vw), 64px);
& ul,
& li{
display: contents;
}
& a{
display: grid;
grid-template-columns: auto 25px;
align-items: center;
column-gap: 8px;
width: min(100%, 240px);
min-height: 56px;
padding: 4px 16px;
border: 1px solid #707070;
border-radius: 28px;
color: inherit;
font-weight: 700;
text-align: center;
text-decoration: none;
&:after{
content: "";
aspect-ratio: 1;
background: currentColor;
border-radius: 100%;
}
&[data-fav-id]{
&:after{
content: "";
aspect-ratio: 1;
background: #999 url('data:image/svg+xml;charset=UTF-8,');
}
}
&[data-fav-status="on"] {
border: 1px solid var(--color-theme);
color: var(--color-theme);
&:after{
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
#detailBody{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
background: rgba(var(--color-theme-rgb), 0.15);
&>*{
grid-column: 2;
}
&>div{
margin: clamp(48px, calc(64 / 1200 * 100vw), 64px) 0 0;
padding: clamp(16px, calc(48 / 1200 * 100vw), 48px);
border-radius: 20px;
background: #fff;
}
& h3{
display: none;
}
.fr-view{
order: -1;
font-weight: 500;
}
& i{
position: relative;
justify-self: end;
align-self: start;
display: grid;
grid-gap: 4px;
grid-template-columns: 16px 1fr;
align-items: center;
margin-top: 16px;
color: var(--color-theme);
font-size: 14px;
font-style: normal;
&:before{
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
}
}
}
#detailTopics{
margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
padding: clamp(16px, calc(32 / 1200 * 100vw), 32px);
padding-top: 0;
border: 2px solid var(--color-theme);
border-radius: 20px;
& h4{
position: relative;
margin-top: clamp(-16px, calc(-32 / 1200 * 100vw), -32px);
margin-bottom: clamp(16px, calc(24 / 1200 * 100vw), 24px);
width: 12em;
font-size: 18px;
font-weight: 700;
text-align: center;
color: var(--color-theme);
background: #fff;
&:before, &:after{
content: "";
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--color-theme);
}
&:before{
left: 0;
transform: rotate(-20deg);
}
&:after{
right: 0;
transform: rotate(20deg);
}
}
& dl{
display: grid;
grid-row-gap: 24px;
dt{
font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
}
dd:has(img){
grid-row: 1;
}
img{
aspect-ratio: 1 / 0.667;
object-fit: cover;
border-radius: 20px;
border: clamp(8px, 1.2vw, 10px) solid #fff;
filter: drop-shadow(4px 4px 6px #ccc);
}
& a {
display: grid;
grid-template-columns: 1fr 20px;
align-items: center;
grid-gap: 16px;
width: min(80%, 200px);
min-height: 40px;
margin: auto;
padding: 8px;
border: 1px solid #fff;
border-radius: 50px;
background: var(--color-theme);
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
&:after {
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
transition: transform 0.2s ease-out;
}
}
@media (min-width: 768px){
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
&:has(img){
& a{
margin: inherit;
}
}
& dt{
grid-column: 2;
grid-row: 1;
}
& dd{
grid-column: 2;
}
& dd:has(img){
grid-column: 1;
grid-row: 1 / 3;
}
& img{
margin-right: clamp(24px, calc(48 / 1200 * 100vw), 48px);
width: 300px;
}
}
}
}
#detailRecommend{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: clamp(48px, calc(64 / 1200 * 100vw), 64px) 0 0;
background: rgba(var(--color-theme-rgb), 0.15);
overflow: hidden;
&>*{
grid-column: 2;
}
& h2{
display: none;
}
& section{
display: grid;
grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}
& h3{
position: relative;
display: grid;
grid-template-columns: 24px 1fr;
justify-self: start;
grid-gap: 6px;
padding: 8px 0;
width: 100%;
font-weight: 700;
font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
letter-spacing: 0.1em;
&:before {
content: "";
aspect-ratio: 1;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
transform: translateY(clamp(2px, calc(4 / 1200 * 100vw), 4px));
}
&+div{
margin-bottom: 24px;
}
}
div+h3{
margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
& dl{
position: relative;
display: grid;
align-content: start;
grid-row-gap: 16px;
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
border-radius: 8px;
background: var(--dummy);
}
& dt{
font-weight: 700;
letter-spacing: 0.025em;
}
& dd{
&:has(img){
order: -1;
}
&:has(a){
display: contents;
}
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 8px;
}
}
/*
& dt, & p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: calc(1.65em * 2);
overflow: hidden;
}
*/
}
& a{
display: grid;
grid-template-columns: 1fr 20px;
align-items: center;
grid-gap: 16px;
width: min(80%, 200px);
min-height: 40px;
margin: auto;
padding: 8px;
border: 1px solid #fff;
border-radius: 50px;
background: var(--color-theme);
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
&:after {
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
transition: transform 0.2s ease-out;
}
}
.slide{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 40px auto 40px;
justify-self: center;
align-items: center;
grid-gap: 16px;
width: min(var(--wrap-fit), 1140px);
@media (min-width: 1200px) {
width: min(var(--wrap-fit), calc(1140px + 108px));
}
&[lsc-lb="List"]{
display: none;
}
&:not(.slick-initialized){
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
&:before{
content: "";
grid-column: 2;
grid-row: 1;
aspect-ratio: 1 / 0.667;
@media (min-width: 576px) {
width: calc(50% - 16px);
}
@media (min-width: 768px) {
width: calc(33.33% - 16px);
}
@media (min-width: 1200px) {
width: calc(25% - 16px);
}
}
}
.slick-list{
grid-column: 2;
grid-row: 1 / 3;
margin: 0 -8px;
&:only-child{
.slick-track{
transform: unset !important;
margin: 0 auto !important;
}
}
@media (max-width: 767.98px) {
}
}
.slick-slide{
margin: 0 8px;
}
.slick-arrow{
all: unset;
box-sizing: border-box;
align-self: center;
/* justify-self: center; */
position: relative;
aspect-ratio: 1;
width: 40px;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
font-size: 0;
cursor: pointer;
z-index: 1;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 1;
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background-size: 24px;
border-radius: 100%;
}
}
.slick-prev{
grid-column: 1;
grid-row: 1;
justify-self: end;
&:before{
transform: scale(-1, 1);
}
}
.slick-next{
grid-column: 3;
grid-row: 1;
}
.slick-dots{
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px clamp(24px, calc(32 / 1200 * 100vw), 32px);
&:has(li:only-child){
display: none;
}
& li{
aspect-ratio: 1;
width: 8px;
border-radius: 100%;
border: 1px solid currentColor;
overflow: hidden;
cursor: pointer;
&.slick-active{
background: currentColor;
transform: scale(2);
}
}
& button{
visibility: hidden;
}
}
}
#detailTag{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: clamp(48px, calc(64 / 1200 * 100vw), 64px) 0 0;
background: rgba(var(--color-theme-rgb), 0.15);
@media (min-width: 576px) {
/* grid-template-columns: auto 1fr;*/
}
&>*{
grid-column: 2;
}
& div+div{
margin-top: 24px;
}
& div{
display: grid;
grid-row-gap: 8px;
@media (min-width: 576px) {
/* display: contents;*/
}
}
& h3{
position: relative;
display: grid;
grid-template-columns: 24px 1fr;
justify-self: start;
grid-gap: 6px;
padding: 8px 0;
width: 100%;
font-weight: 700;
font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
letter-spacing: 0.1em;
&:before {
content: "";
aspect-ratio: 1;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
transform: translateY(clamp(2px, calc(4 / 1200 * 100vw), 4px));
}
}
& ul{
display: flex;
flex-wrap: wrap;
grid-gap: 16px 8px;
&[LSC-LB="List"]{
display: none;
}
}
& a{
display: grid;
align-items: center;
min-height: 24px;
padding: 0 16px;
border: 1px solid #999;
border-radius: 4px;
background: #fff;
color: inherit;
font-weight: 700;
font-size: 14px;
text-decoration: none;
}
}
#detailBasic{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: 8px;
padding: clamp(48px, calc(64 / 1200 * 100vw), 64px) 0 0;
background: rgba(var(--color-theme-rgb), 0.15);
&>*{
grid-column: 2;
}
& h3{
position: relative;
display: grid;
grid-template-columns: 24px 1fr;
justify-self: start;
grid-gap: 6px;
padding: 8px 0;
width: 100%;
font-weight: 700;
font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
letter-spacing: 0.1em;
&:before {
content: "";
aspect-ratio: 1;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
transform: translateY(clamp(2px, calc(4 / 1200 * 100vw), 4px));
}
}
& h3+div+div{
color: #e71f19;
}
& dl{
display: grid;
font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
@media (min-width: 576px) {
grid-template-columns: auto 1fr;
}
}
& dt,
& dd{
padding: 16px 0;
letter-spacing: 0.1em;
padding: 16px clamp(24px, calc(32 / 1200 * 100vw), 32px);
}
& dt{
font-weight: 700;
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
background: var(--color-theme);
@media (max-width: 575.98px) {
border-bottom: unset;
}
@media (min-width: 576px) {
max-width: 320px;
}
&:first-of-type{
@media (max-width: 575.98px) {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
@media (min-width: 576px) {
border-top-left-radius: 20px;
}
}
&:last-of-type{
@media (min-width: 576px) {
border-bottom-left-radius: 20px;
}
}
}
& dd{
border-bottom: 1px solid rgba(var(--color-theme-rgb), 0.15);
background: #fff;
@media (max-width: 575.98px) {
padding-top: 8px;
}
&:first-of-type{
@media (min-width: 576px) {
border-top-right-radius: 20px;
}
}
&:last-of-type{
@media (max-width: 575.98px) {
border-bottom: unset;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
@media (min-width: 576px) {
border-bottom-right-radius: 20px;
}
}
& ul{
display: grid;
grid-row-gap: 8px;
}
& li{
& a{
display: grid;
grid-template-columns: 17px auto;
grid-column-gap: 8px;
color: #2ca89d;
&:before{
content: "";
aspect-ratio: 1;
background: currentColor;
transform: translateY(0.4em);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
}
}
#detailMovie{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr min(var(--wrap-fit), 860px) 1fr;
padding: clamp(48px, calc(72 / 1200 * 100vw), 72px) 0 0;
background: rgba(var(--color-theme-rgb), 0.15);
&>*{
grid-column: 2;
}
& h3{
display: none;
margin-bottom: clamp(24px, calc(32 / 1200 * 100vw), 32px);
color: var(--color-theme);
font-weight: 700;
font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
letter-spacing: 0.05em;
&:empty{
display: none;
}
}
& h3+div{
display: flex;
justify-content: center;
}
& iframe{
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
border-radius: 8px;
&.short{
aspect-ratio: 9 / 16;
@media (max-width: 767.98px) {
width: min(100%, 480px);
height: auto !important;
}
@media (min-width: 768px) {
width: auto;
}
}
}
}
#detailRelated{
order: 1;
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: clamp(48px, calc(72 / 1200 * 100vw), 72px);
padding: clamp(48px, calc(72 / 1200 * 100vw), 72px) 0 0;
&>*{
grid-column: 2;
}
& h3{
display: grid;
grid-template-columns: 8px 1fr;
grid-column-gap: 16px;
align-items: center;
padding: 8px 8px 8px 0;
font-weight: 700;
font-size: clamp(18px, calc(20 / 1200 * 100vw), 20px);
letter-spacing: 0.05em;
border-top-right-radius: 20px;
background: var(--color-gr);
&:before {
content: "";
width: 4px;
height: calc(100% + 16px);
background: var(--color-theme);
}
}
& h3+div{
display: grid;
grid-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
@media (min-width: 576px) {
grid-template-columns: repeat(2, 1fr);
}
}
& dl{
position: relative;
display: grid;
grid-template-columns: clamp(104px, calc(200 / 1200 * 100vw), 200px) 1fr;
align-content: start;
column-gap: 16px;
padding: 8px;
background: #fff;
border: 1px solid #999;
border-radius: 8px;
font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
&:not(:has(img)):before{
content: "";
aspect-ratio: 1 / 0.667;
background: var(--dummy);
border-radius: 4px;
}
}
& dt{
align-self: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
max-height: calc(1.65em * 4);
letter-spacing: 0.025em;
overflow: hidden;
}
& dd{
&:has(img){
order: -1;
}
&:has(a){
display: contents;
}
& img{
aspect-ratio: 1 / 0.667;
object-fit: cover;
border-radius: 8px;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
}
#detailFooter{
grid-column: 1 / 4;
padding: clamp(48px, calc(72 / 1200 * 100vw), 72px) 0 0;
background: rgba(var(--color-theme-rgb), 0.15);
}
#detailMap{
display: grid;
grid-template-columns: 1fr min(var(--wrap-fit), 860px) 1fr;
margin-top: -24px;
@media (min-width: 992px) {
margin-top: -48px;
}
&>*{
grid-column: 2;
}
& h3{
color: var(--color-theme);
font-weight: 700;
font-size: clamp(24px, calc(32 / 1200 * 100vw), 32px);
letter-spacing: 0.05em;
text-align: center;
&:lang(en){
font-size-adjust: 0.543;
font-family: dinosaur, var(--font);
}
}
#detailMapEmbed{
grid-column: 1 / 4;
grid-row: 1;
}
}
#detailMapEmbed{
& iframe{
width: 100%;
height: min(75vh, 560px);
background: #ccc;
}
}
#detailMapLink{
grid-column: 1 / 4;
padding-top: 24px;
background: #fff;
& a{
display: grid;
grid-template-columns: 20px auto 20px;
align-items: center;
column-gap: 8px;
width: min(100%, 280px);
min-height: 56px;
margin: auto;
padding: 4px 24px;
border: 1px solid var(--color-theme);
border-radius: 8px;
color: var(--color-theme);
font-weight: 700;
text-align: center;
text-decoration: none;
background: #fff;
&:before{
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
-webkit-mask-size: contain;
}
&:after{
content: "";
aspect-ratio: 1;
background: currentColor;
transform: translateY(0.1em);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
#detaiShare{
display: flex;
align-items: center;
justify-content: center;
column-gap: 24px;
& h3{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
& ul{
display: flex;
justify-content: center;
grid-gap: 16px;
}
& li{
display: contents;
}
& a{
display: block;
aspect-ratio: 1;
width: 32px;
font-size: 0;
background: var(--color);
&[href*="line.me"]{
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href*="x.com"]{
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href*="facebook.com"]{
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
#recommend{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: clamp(48px, calc(72 / 1200 * 100vw), 72px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px) 0;
overflow: hidden;
&>*{
grid-column: 2;
}
& h2{
display: none;
}
& section{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
&>*{
grid-column: 2;
}
}
& h3{
display: grid;
grid-template-columns: 8px 1fr;
grid-column-gap: 16px;
align-items: center;
padding: 8px 8px 8px 0;
font-weight: 700;
font-size: clamp(18px, calc(20 / 1200 * 100vw), 20px);
letter-spacing: 0.05em;
border-top-right-radius: 20px;
background: var(--color-gr);
&:before{
content: "";
width: 4px;
height: calc(100% + 16px);
background: var(--color-theme);
}
}
& dl{
position: relative;
display: grid;
align-content: start;
grid-row-gap: 16px;
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
border-radius: 8px;
background: var(--dummy);
}
}
& dt{
font-weight: 700;
letter-spacing: 0.025em;
}
& dd{
&:has(img){
order: -1;
}
&:has(a){
display: contents;
}
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 8px;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
.slide{
grid-column: 1 / 4;
display: grid;
grid-template-columns: 40px auto 40px;
justify-self: center;
align-items: center;
grid-gap: 16px;
width: min(var(--wrap-fit), 1140px);
@media (min-width: 1200px) {
width: min(var(--wrap-fit), calc(1140px + 108px));
}
&[lsc-lb="List"]{
display: none;
}
&:not(.slick-initialized){
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
&:before{
content: "";
grid-column: 2;
grid-row: 1;
aspect-ratio: 1 / 0.667;
@media (min-width: 576px) {
width: calc(50% - 16px);
}
@media (min-width: 768px) {
width: calc(33.33% - 16px);
}
@media (min-width: 1200px) {
width: calc(25% - 16px);
}
}
}
.slick-list{
grid-column: 2;
grid-row: 1 / 3;
margin: 0 -8px;
&:only-child{
.slick-track{
transform: unset !important;
margin: 0 auto !important;
}
}
@media (max-width: 767.98px) {
}
}
.slick-slide{
margin: 0 8px;
}
.slick-arrow{
all: unset;
box-sizing: border-box;
align-self: center;
/* justify-self: center; */
position: relative;
aspect-ratio: 1;
width: 40px;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
font-size: 0;
cursor: pointer;
z-index: 1;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 1;
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background-size: 24px;
border-radius: 100%;
}
}
.slick-prev{
grid-column: 1;
grid-row: 1;
justify-self: end;
&:before{
transform: scale(-1, 1);
}
}
.slick-next{
grid-column: 3;
grid-row: 1;
}
.slick-dots{
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px clamp(24px, calc(32 / 1200 * 100vw), 32px);
&:has(li:only-child){
display: none;
}
& li{
aspect-ratio: 1;
width: 8px;
border-radius: 100%;
border: 1px solid currentColor;
overflow: hidden;
cursor: pointer;
&.slick-active{
background: currentColor;
transform: scale(2);
}
}
& button{
visibility: hidden;
}
}
}
.pswp__counter{
display: none;
}
.mapToggle {
all: unset;
box-sizing: border-box;
grid-column: 2;
justify-self: center;
display: grid;
grid-template-columns: 1fr 18px;
align-items: center;
column-gap: 8px;
width: min(100%, 280px);
min-height: 48px;
/* margin-top: clamp(48px, calc(72 / 1200 * 100vw), 72px);*/
margin: 0 auto clamp(48px, calc(72 / 1200 * 100vw), 72px);
padding: 8px 16px;
border: 1px solid currentColor;
background: var(--color-theme);
border-radius: 8px;
font-weight: 700;
text-align: center;
text-decoration: none;
color: #fff;
cursor: pointer;
&:after {
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&.open:after {
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}