/* .modal-flexible *******************************/

.modal-flexible {

  .wrapper {
    .sidebar {
      background-color: #e7eef7;
      padding: 20px;
    }

    .graphic {
      display: none;
    }

    .main {
      background-color: #fff;

      .header {
        padding: 20px;
        position: relative;

        .btn-close {
          position: absolute;
          right: 20px;
          top: 20px;
        }

        h2 {
          font-size: 2.0rem;
        }

        h3 {
          font-size: 1.3rem;
          font-weight: 300;
          padding-top: 10px;
        }
      }

      .body {
        padding: 20px;
      }

      .footer {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 20px;
        position: relative;
      }
    }
  }
}

@media (min-width: 1000px) {

  .modal-flexible {
    border: 20px solid #fff;
    max-height: 90svh;

    .wrapper {
      align-items: stretch;
      display: flex;

      .sidebar {
        width: 30%;
      }

      .graphic {
	  	  background-position: center;
		  	background-repeat: no-repeat;
			  background-size: cover;
        display: block;
        width: 30%;

        &.graphic-hosting { background-image: url('../../../assets/images/related/hosting.webp'); }
        &.graphic-domains { background-image: url('../../../assets/images/related/domains.webp'); }
        &.graphic-marketing { background-image: url('../../../assets/images/related/marketing.webp'); }
        &.graphic-maintenance { background-image: url('../../../assets/images/related/maintenance.webp'); }
        &.graphic-accessibility { background-image: url('../../../assets/images/related/accessibility.webp'); }
        &.graphic-ai { background-image: url('../../../assets/images/related/ai.webp'); }
        &.graphic-starter { background-image: url('../../../assets/images/websites/starter.webp'); }
        &.graphic-professional { background-image: url('../../../assets/images/websites/professional.webp'); }
        &.graphic-premium { background-image: url('../../../assets/images/websites/premium.webp'); background-position: left top; }
      }

      .main {
        width: 70%;

        .header {
          padding: 20px 40px;

				  &::after {
				  	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(255,255,255,0) 100%);
				  	bottom: -20px;
				  	content: '';
				  	display: block;
				  	height: 20px;
				  	left: 0;
				  	position: absolute;
			  		width: calc(100%);
		  		}
        }

        .body {
          max-height: 60svh;
          overflow: hidden;
          overflow-y: auto;
          padding: 40px;
          padding-bottom: 30px;
        }

        .footer {
          padding: 20px;

				  &::before {
					  background: linear-gradient(0deg, rgba(0,0,0,.05) 0%, rgba(255,255,255,0) 100%);
					  content: '';
					  display: block;
					  height: 20px;
					  left: 0;
					  position: absolute;
					  top: -20px;
					  width: calc(100%);
				  }
        }
      }
    }
  }
}