@import 'https://unpkg.com/open-props';

:root {
  --neutral-00: #ffffff;
  --neutral-10: #f0f4fc;
  --neutral-30: #727272;
  --neutral-70: #323232;
  --neutral-90: #000000;
  --primary-20: #244c98;
  --primary-40: #d7e2f6;
  --primary-60: #ebf0fa;
  --text-00: #ffffff;
  --text-20: #244c98;
  --text-30: #727272;
  --text-50: #1f4284;
  --text-70: #323232;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  font-family: 'Manrope', system-ui, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375;
  color: var(--text-70);
  display: grid;
  place-content: center;
  background-color: var(--neutral-00);
}

:is(button, input):focus,
:is(button, input):focus-visible {
  outline: 2px solid var(--primary-20);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  font: inherit;
  transition: all 300ms ease-in-out;
  text-wrap: nowrap;
  background-color: transparent;

  &:hover {
    opacity: 0.8;
  }

  &:active {
    transform: translateY(-5px);
  }
}

dialog {
  position: fixed;
  inset: 0;
  max-width: min(500px, 90%);
  max-height: min(575px, 90vh);
  margin: auto;
  width: 100%;
  display: grid;
  border: none;
  transition: opacity 0.5s var(--ease-3);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  &::backdrop {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: backdrop-filter 0.5s ease;
  }

  &:not([open]) {
    pointer-events: none;
    opacity: 0;
  }
}

html:has(dialog[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  dialog {
    animation: var(--animation-scale-down) forwards;
    animation-timing-function: var(--ease-squish-3);
  }

  dialog[open] {
    animation: var(--animation-slide-in-up) forwards;
  }
}

input {
  width: 100%;
  font: inherit;
  border: none;
  text-wrap: nowrap;
  color: var(--text-50);
  background-color: var(--primary-40);
  padding: 1.5rem;
  border-radius: 0.625rem;

  &::placeholder {
    color: var(--text-50);
  }
}

img {
  display: block;
  object-fit: cover;
}

.container {
  width: 1920px;
  /* NOTE: padding-block is for simplification purposes */
  padding: 2.25rem 2.5rem;
}

.block {
  border-radius: 0.625rem;
  overflow: hidden;
  height: 455px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary-60);

  .block__content {
    margin-left: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;

    .block__info {
      max-width: 511px;
      display: flex;
      flex-direction: column;
      gap: 1.125rem;

      .block__title {
        font-size: 1.875rem;
        font-weight: 500;
        line-height: 1.6;
        color: var(--text-50);
      }

      .block__text {
        font-size: 1.0625rem;
        font-weight: 400;
        line-height: 1.6;
        color: var(--text-30);
      }
    }
  }

  .block__img {
    display: grid;
    place-content: center;

    img {
      /* NOTE: Only for pixel-perfect perposes */
      width: 910px;
    }
  }
}

.modal {
  padding: 1.5rem;
  background-color: var(--neutral-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;

  .modal__close {
    --_cross-thickness: 2px;
    /* NOTE: Only for pixel-perfect perposes */
    --_cross-length: calc(sqrt(2 * pow(14, 2)) * 1px);
    align-self: flex-end;
    position: relative;
    background-color: var(--neutral-00);
    border-radius: 0.625rem;
    width: 3.25rem;
    height: 3.25rem;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: var(--neutral-90);
      border-radius: 100vw;
      transition: transform 300ms var(--ease-3);
    }

    &::before {
      width: var(--_cross-length);
      height: var(--_cross-thickness);
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      width: var(--_cross-length);
      height: var(--_cross-thickness);
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    &:hover::before,
    &:hover::after {
      transition: transform 300ms var(--ease-3);
    }

    &:hover::before {
      transform: translate(-50%, -50%) rotate(135deg);
    }

    &:hover::after {
      transform: translate(-50%, -50%) rotate(45deg);
    }
  }

  .modal__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;

    .modal__title {
      font-size: 1.5rem;
      color: var(--text-70);
    }

    .modal__form {
      display: flex;
      flex-direction: column;
      gap: 2.25rem;

      .modal__content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        .modal__inputs {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;

          label:hover > input {
            opacity: 0.8;
          }
        }

        .modal__checkbox {
          position: relative;
          display: flex;
          align-items: center;
          gap: 0.875rem;
          font-size: 1.125rem;
          color: var(--text-70);

          input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
          }

          .checkbox-label {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            cursor: pointer;

            &:hover {
              opacity: 0.8;
            }

            .checkbox-label__icon {
              display: block;
              width: 1.125rem;
              height: 1.125rem;
              background-color: transparent;
              border: 2px solid var(--neutral-70);
              border-radius: 3px;
            }

            .checkbox-label__remember {
              font-weight: 400;
              /* NOTE: Only for pixel-perfect perposes */
              line-height: 25px;
            }
          }

          input:checked + label > .checkbox-label__icon {
            background-color: var(--neutral-70);
          }

          input:focus + label > .checkbox-label__icon {
            outline: 2px solid var(--primary-20);
            border-radius: 2px;
            outline-offset: 2px;
          }
        }

        .modal__restore {
          position: relative;
          color: var(--text-20);
          font-size: 1.25rem;
          width: max-content;

          .restore__underline {
            position: absolute;
            bottom: -0.15rem;
            left: 0;
            right: 0;
            height: 2px;
            transform: scaleX(0);
            border-radius: 100vw;
            background-color: var(--primary-20);
            transition: transform 300ms var(--ease-3);
            transform-origin: left;
            margin-left: -0.15rem;
            margin-right: -0.15rem;
            width: calc(100% + 0.3rem);
          }

          &:hover .restore__underline {
            transform: scaleX(1);
          }
        }
      }

      .modal__buttons {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
    }
  }
}

.btn {
  --_border-width: 1px;
  width: 100%;
  padding-block: calc(1.125rem - var(--_border-width));
  padding-inline: calc(0.75rem - var(--_border-width));
  border: var(--_border-width) solid var(--primary-20);
  border-radius: 0.25rem;
  line-height: 29px;
}

.btn--primary {
  background-color: var(--primary-20);
  color: var(--text-00);
  /* NOTE: Only for pixel-perfect perposes */
  height: 65px;
}

.btn--secondary {
  color: var(--text-20);
  /* NOTE: Only for pixel-perfect perposes */
  height: 65px;
}

.btn--block {
  /* NOTE: Only for pixel-perfect perposes */
  max-width: 341px;
  /* - */
  background-color: var(--primary-20);
  color: var(--text-00);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  padding-left: 1.5rem;
  border-radius: 100vw;
  border: none;

  .btn__text {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .btn__icon {
    display: grid;
    place-content: center;
    background-color: var(--neutral-00);
    border-radius: 100vw;
    width: 2.75rem;
    height: 2.75rem;
  }

  &:hover svg {
    animation: arrow-rotate 500ms ease-out backwards, arrow-bounce 1000ms 500ms linear infinite;
  }
}

@keyframes arrow-rotate {
  0% {
    transform: none;
  }
  100% {
    transform: rotate(1turn);
  }
}

@keyframes arrow-bounce {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale(1.25);
  }
}

/*
  NOTE:
  I implemented adaptive layouts as requested.
  But it is also possible to add responsive design.
*/

@media screen and (max-width: 1920px) {
  .container {
    width: 1440px;
  }

  .block {
    .block__content {
      flex-basis: 50%;

      .block__info {
        .block__title {
          font-size: 1.625rem;
        }
      }
    }

    .block__img {
      flex-basis: 50%;

      img {
        /* NOTE: Only for pixel-perfect perposes */
        max-width: 680px;
      }
    }
  }
}

@media screen and (max-width: 1440px) {
  .container {
    width: 768px;
    padding: 1.5rem;
  }

  .block {
    flex-direction: column;
    height: auto;

    .block__content {
      flex-basis: auto;
      margin: 0;
      padding: 1.5rem;
      gap: 1.5rem;

      .block__info {
        max-width: none;

        .block__title {
          font-size: 1.25rem;
        }

        .block__text {
          font-size: 0.9375rem;
        }
      }
    }

    .block__img {
      flex-basis: auto;

      img {
        /* NOTE: Only for pixel-perfect perposes */
        max-width: 720px;
        max-height: 360px;
      }
    }
  }

  .btn--block {
    /* NOTE: Only for pixel-perfect perposes */
    max-width: 261px;
    /* - */
    padding: 0.625rem;
    padding-left: 1.125rem;

    .btn__text {
      font-size: 0.9375rem;
    }

    .btn__icon {
      width: 2.25rem;
      height: 2.25rem;
    }
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 375px;
    padding-block: 0.875rem;
  }

  .block {
    .block__content {
      padding-bottom: 1.125rem;
      gap: 1.125rem;

      .block__info {
        gap: 0.875rem;

        .block__title {
          font-size: 1.0625rem;
          /* NOTE: Only for pixel-perfect perposes */
          line-height: 27px;
        }

        .block__text {
          font-size: 0.8125rem;
          /* NOTE: Only for pixel-perfect perposes */
          line-height: 21px;
        }
      }
    }

    .block__img {
      img {
        /* NOTE: Only for pixel-perfect perposes */
        width: 327px;
        height: 220px;
      }
    }
  }

  .btn--block {
    max-width: 100%;
  }
}

/* NOTE: For responsiveness from 320px */
@media screen and (max-width: 375px) {
  .container {
    width: fit-content;
  }

  .block {
    .block__img {
      img {
        width: 100%;
        height: 220px;
      }
    }
  }

  .btn--block {
    gap: 1rem;
    width: 224px;

    .btn__text {
      width-min: 0;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .btn__icon {
      flex-shrink: 0;
    }
  }
}