.tabs {
padding: 32px 32px 40px;
display: grid;
grid-template-columns: 1fr;
row-gap: 32px;
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 2px 0 rgba(24, 24, 28, 0.06),
0 0 3px 0 rgba(24, 24, 28, 0.07);
@media screen and (max-width: 768px) {
padding: 20px 16px 24px;
row-gap: 20px;
}
& .tabs__tab-list {
display: flex;
column-gap: 6px;
border-bottom: 1px solid #cbd6e2;
& .tabs__tab {
position: relative;
flex: 1;
padding-bottom: 16px;
display: flex;
justify-content: center;
transition: opacity 0.2s;
&[aria-selected="false"]:hover {
opacity: 0.8;
}
& .tabs__tab-text {
font-size: 1.125rem;
line-height: 1.5;
text-align: center;
color: #737373;
font-weight: 500;
word-break: keep-all;
@media screen and (max-width: 768px) {
font-size: 1rem;
line-height: 1.4;
}
}
&[aria-selected="true"] {
& .tabs__tab-text {
color: #2ba6e4;
font-weight: bold;
}
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background-color: #2ba6e4;
}
}
}
}
& .tabs__panel[hidden="until-found"] {
display: none;
}
}