/**
 * Section: double-column-with-animated-circle-image
 *
 * Extracted from template-parts/double_column_with_animated_circle_image.php.
 * Loaded via trunorth_enqueue_section('double-column-with-animated-circle-image').
 */

.double-column-wrapper{
    display:grid;
    grid-template-columns: 1fr 1.25fr;
    gap: calc(var(--vw) * 2);
    align-items: center;
    padding: calc(var(--vw) * 3.75) calc(var(--vw) * 5);
    font-family: 'open sans', sans-serif;

    .double-column-content{
      display: flex;
      flex-direction:column;
      gap: calc(var(--vw) * 1);

      .tag-line{
        font-size: var(--font-medium-large);
        font-weight: 400;
      }
      h2{
        font-size: var(--font-h3);
        font-weight: 600;
      }
      p{
        font-size: var(--font-medium);
        font-weight: 400;
      }

      .cta-button-two-wrapper{
        margin-top: calc(var(--vw) * 3);
      }
    }

    .double-column-image-container{
        display:flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #D9d9d9;
        width: calc(var(--vw) * 35);
        aspect-ratio: 1/1;
        transform: translateY(-15%);
        overflow:clip;

        img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
    }
}

@media (max-width: 768px) {
    .double-column-wrapper {
        grid-template-columns: 1fr;
        padding: calc(var(--vw) * 0) calc(var(--vw) * 5);
    }

    .double-column-wrapper .double-column-image-container {
        width: 65%;
        transform: none !important;
    }
}