body {
    background-color: #29333d;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:
    auto /* box-left-top */
    auto /* box-left-middle */
    auto; /* box-left-bottom */
    grid-template-areas:
        "box-left-top box-right"
        "box-left-middle box-right"
        "box-left-bottom box-right";
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    background: rgb(33 67 113);
    position: relative;
    top: 30px;
}

.box-left-top, .box-left-middle, .box-left-bottom {
    color: #fdecc2;
    text-align:center;
}

.box-left-top {
    grid-area: box-left-top;
}

.box-left-middle {
    grid-area: box-left-middle;
}

.box-left-bottom {
    grid-area: box-left-bottom;
}

.box-right {
    grid-area: box-right;
    background: #f0f0f0;
    padding: 8px;
}

@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "box-left-top"
            "box-left-middle"
            "box-right"
            "box-left-bottom";
    }
}

.box-left-top img {
    height:60px;
}

.logo {
    display: flex;
    justify-content: center;
}

.logo-text-top {
    padding-right: 42px;
    font-size: 11px;
    line-height: 12px;
    text-align: right;
}

.logo-text-bottom {
    margin-right: 20px;
    padding-top: 3px;
    padding-right: 20px;
    border-right: 1px solid #fdecc2;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    text-align: right;
}

.login_logos {
    display: flex;
    justify-content: center;
    gap: 2rem; /* space between each image */
}