main {
    display: grid;
    gap: 4rem;
    margin: 0 var(--content-start);
}

main>section:first-child {
    margin-top: 2rem;
}

/* The card */
.card {
    position: relative;
    display: flex;
    gap: 4rem;
}

.middle-card {
    position: relative;
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
}

.thumbnail {
    box-shadow: rgb(255 237 229 / 51%) 0px 7px 29px;
}

.blue-thumbnail {
    box-shadow: rgb(25 157 255 / 11%) 0px 7px 29px 0px;
    width: 65%;
}

/* Image on the left side */
img.left {
    width: 100%;
}

/* Right side of the card */
.pobi-right {
    padding: 1em;
    width: 88%;
}

div.pobi-right h1 {
    font-size: 3em;
    color: var(--secondary-blue);
}

div.pobi-right h3 {
    padding: 0.8rem 0;
}

[class$="separator"] {
    margin: 10px 0;
    border: 1px solid #6dbaa1;
}

.orange-separator {
    border-color: #f08630;
}

.blue-separator {
    border-color: #57a0d8;
}

div.pobi-right p {
    text-align: start;
    line-height: 1.5;
    color: #4b4b4b;
}

/* DATE of release*/
h5.small-title {
    font-size: 4rem;
    color: #fe692c1f;
}

h5.bluish {
    color: #199dff17;
}

.second-card {
    margin: var(--content-start) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

/* POBI LOGO */
svg.pobi-logo {
    width: 40%;
}

.pobi-section {
    position: relative;
    width: 100%;
    display: block;
}

.full-height {
    min-height: 100vh;
}

.over-hide {
    overflow: hidden;
    z-index: 1;
}

.padding-tb {
    padding: 100px 0;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.checkbox:checked+label,
.checkbox:not(:checked)+label {
    position: relative;
    cursor: pointer;
    margin-right: 9px;
    margin-left: 6px;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 3px solid #229771;
    background-size: cover;
    background-position: center;
    transition: all 0.2s ease;
    background-image: url("/static/images/our_product_page/pobi-min.jpg");
    animation: border-transform 6s linear infinite alternate forwards;
    animation-play-state: paused;
}

.checkbox.scnd+label {
    background-image: url("/static/images/our_product_page/pobi2-min.webp");
}

.checkbox.thrd+label {
    background-image: url("/static/images/our_product_page/pobi3-min.jpg");
}

.checkbox.foth+label {
    background-image: url("/static/images/our_product_page/pobi4-min.jpg");
}

.checkbox:checked+label {
    box-shadow: 0 8px 10px 0 rgba(16, 39, 112, 0.2);
    transform: scale(1.3);
    animation-play-state: running;
}

@keyframes border-transform {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.slider-height-padding {
    padding-top: 440px;
    display: flex;
    justify-content: start;
    margin-left: 1rem;
}

ul.pobi-ul {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 100;
}

ul.pobi-ul li {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    display: block;
    z-index: 100;
    height: 400px;
    border: 5px solid #229771;
    background-size: cover;
    background-position: center;
    background-image: url("/static/images/our_product_page/pobi-min.jpg");
    border-radius: 50%;
    color: #343434;
    opacity: 0;
    box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.1);
    transition: all 0.5s ease;
}

ul.pobi-ul li span {
    mix-blend-mode: difference;
}

ul.pobi-ul li:nth-child(2) {
    background-image: url("/static/images/our_product_page/pobi2-min.webp");
}

ul.pobi-ul li:nth-child(3) {
    background-image: url("/static/images/our_product_page/pobi3-min.jpg");
}

ul.pobi-ul li:nth-child(4) {
    background-image: url("/static/images/our_product_page/pobi4-min.jpg");
}

.checkbox.frst:checked~ul.pobi-ul li:nth-child(1) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.checkbox.scnd:checked~ul.pobi-ul li:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.checkbox.thrd:checked~ul.pobi-ul li:nth-child(3) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.checkbox.foth:checked~ul.pobi-ul li:nth-child(4) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.pobicle-logo {
    position: absolute;
    top: 20px;
    left: 15px;
    display: block;
    transition: all 250ms linear;
}