.card {
    --on-background: #00276e;
    --on-background-secondary: #376ed3;
    --background: #dbe8ff;
    width: 100%;
    height: 650px;
    position: relative;
}

.mockupPhoneContainer {
    position: absolute;
    top: 4%;
    right: 5%;
    z-index: 0;
}

.mockupPhone {
    z-index: 1;
    position: relative;
    width: 939px;
    height: auto;
}

.screenshotMain {
    position: absolute;
    top: 20.1%;
    right: 27.92%;
    transform: rotate(6.54deg);
    width: 266.9px;
    height: auto;
    z-index: 1;
}

.title {
    font-size: 3rem !important;
}

.description {
    padding: 8px;
    margin: -8px;
    margin-top: 0;
    padding-top: 6px;
}

@media (max-width: 1180px) {
    .card {
        height: 560px;
    }

    .title {
        font-size: 2rem !important;
    }
}

@media screen and (max-width: 800px) {
    .card {
        height: 440px;
        padding: 32px;
    }

    .mockupPhoneContainer {
        top: 16%;
        right: -14%;
    }

    .mockupPhone {
        width: 723.338px;
        height: 508.2px;
    }

    .screenshotMain {
        width: 206.1px;
        right: 27.9%;
        top: 20%;
    }
}

@media screen and (max-width: 480px) {
    .mockupPhoneContainer {
        right: -32%;
    }
}