Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderitur.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla quis diam. Praesent vitae arcu tempor neque lacinia pretium. Nulla non arcu lacinia neque faucibus fringilla. Fusce aliquam vestibulum ipsum.
Nullam sit amet magna in magna gravida vehicula. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Maecenas libero. Proin pede metus, vulputate nec.
<div class="o-grid13">
<h3 class="o-grid13__title"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </h3>
<input type="radio" class="o-grid13__state" name="82-tab" id="82-tab-1" checked>
<div class="o-grid13__tab o-grid13__tab--1">
<label for="82-tab-1" class="o-grid13__control" data-permalink="#?82-tab=title-01">
<span role="tab">Title 01</span>
</label>
</div>
<div role="tabpanel" class="o-grid13__panel">
<div class="o-grid13__panel__inner">
<div class="row">
<div class="col-lg-12 col-xl-16">
<a href="#" target="_self">
<img src="https://placehold.it/600x300/" loading="lazy" width="600" height="300" alt="title-01 thumb">
</a>
</div>
<div class="col-lg-12 col-xl-8">
<p class="o-grid13__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderitur. </p>
<p>
<a href="#" target="_self" class="a-button"> Detail </a>
</p>
</div>
</div>
</div>
</div>
<input type="radio" class="o-grid13__state" name="82-tab" id="82-tab-2">
<div class="o-grid13__tab o-grid13__tab--2">
<label for="82-tab-2" class="o-grid13__control" data-permalink="#?82-tab=title-02">
<span role="tab">Title 02</span>
</label>
</div>
<div role="tabpanel" class="o-grid13__panel">
<div class="o-grid13__panel__inner">
<div class="row">
<div class="col-lg-12 col-xl-16">
<a href="#" target="_self">
<img src="https://placehold.it/600x300/" loading="lazy" width="600" height="300" alt="title-02 thumb">
</a>
</div>
<div class="col-lg-12 col-xl-8">
<p class="o-grid13__perex"> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla quis diam. Praesent vitae arcu tempor neque lacinia pretium. Nulla non arcu lacinia neque faucibus fringilla. Fusce aliquam vestibulum ipsum. </p>
<p>
<a href="#" target="_self" class="a-button"> Detail </a>
</p>
</div>
</div>
</div>
</div>
<input type="radio" class="o-grid13__state" name="82-tab" id="82-tab-3">
<div class="o-grid13__tab o-grid13__tab--3">
<label for="82-tab-3" class="o-grid13__control" data-permalink="#?82-tab=title-03">
<span role="tab">Title 03</span>
</label>
</div>
<div role="tabpanel" class="o-grid13__panel">
<div class="o-grid13__panel__inner">
<div class="row">
<div class="col-lg-12 col-xl-16">
<a href="#" target="_self">
<img src="https://placehold.it/600x300/" loading="lazy" width="600" height="300" alt="title-03 thumb">
</a>
</div>
<div class="col-lg-12 col-xl-8">
<p class="o-grid13__perex"> Nullam sit amet magna in magna gravida vehicula. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Maecenas libero. Proin pede metus, vulputate nec. </p>
<p>
<a href="#" target="_self" class="a-button"> Detail </a>
</p>
</div>
</div>
</div>
</div>
</div>@import "atoms/background/index";
@import "atoms/button/index";
$grid13-items: 3;
$grid13-transition: $base-transition;
.o-grid13 {
$self: &;
display: grid;
grid-gap: 0 $grid-gutter-width;
grid-template-columns: 1fr;
grid-template-rows: auto;
&__tab {
margin-top: space(1);
}
&__panel {
max-height: 0;
opacity: 0;
overflow-y: hidden;
transition: max-height $grid13-transition, opacity $grid13-transition;
&__inner {
overflow: hidden;
}
}
&__state {
@extend .sr-only;
&:checked {
+ #{$self}__tab {
#{$self}__control {
font-weight: bold;
}
+ #{$self}__panel {
max-height: 800px;
opacity: 1;
}
}
}
}
@media (min-width: 430px) {
grid-template-columns: auto 1fr;
grid-template-rows: auto 0 repeat(($grid13-items - 1), auto) min-content;
&__title {
grid-column: 1 / span 2;
grid-row: 1;
}
&__tab {
grid-column: 1;
@for $i from 1 through $grid13-items {
&--#{$i} {
grid-row: $i + 2;
}
}
}
&__panel {
grid-column: 2;
grid-row: 2 / span ($grid13-items + 2);
max-height: unset;
position: relative;
z-index: -1;
}
&__state {
&:checked {
+ #{$self}__tab {
+ #{$self}__panel {
max-height: unset;
position: relative;
z-index: 1;
}
}
}
}
}
@media (min-width: breakpoint-min(md)) {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 0 repeat($grid13-items, auto) min-content;
&__title {
grid-column: 1;
grid-row: 2;
}
&__panel {
grid-column: 2 / span 2;
grid-row: 1 / span ($grid13-items + 2);
}
}
@media (min-width: breakpoint-min(xl)) {
grid-template-columns: repeat(4, 1fr);
&__panel {
grid-column: 2 / span 3;
}
}
}