71 lines
1.3 KiB
CSS
71 lines
1.3 KiB
CSS
.container {
|
|
position: relative;
|
|
padding: calc(36rem / 16) 0;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.bubble {
|
|
--border-radius: calc(5000rem / 16);
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.bar {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.decoration {
|
|
display: none;
|
|
width: calc(128rem / 16);
|
|
}
|
|
|
|
.margin {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.container:nth-child(odd) .bar {
|
|
background-color: var(--primary-accent-light);
|
|
}
|
|
|
|
@media only screen and (min-width: calc(1350rem / 16)) {
|
|
.container:nth-child(odd) .decoration {
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
.container:nth-child(4n + 1) .bar {
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
transform: translateX(-12.5vw);
|
|
}
|
|
|
|
.container:nth-child(4n + 1) .decoration {
|
|
top: calc(-50rem / 16);
|
|
right: 8vw;
|
|
}
|
|
|
|
.container:nth-child(4n + 3) .bar {
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
transform: translateX(12.5vw);
|
|
}
|
|
|
|
.container:nth-child(4n + 3) .decoration {
|
|
top: calc(-50rem / 16);
|
|
left: 8vw;
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|