/**
 * @file
 * Component: Image with text.
 *
 * Provides a responsive layout for an image and associated text content.
 */

.image-with-text__inner-area {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  gap: var(--spacing-md);
}

@media screen and (min-width: 960px) {
  .image-with-text__inner-area {
    grid-template-columns: repeat(2, 50%);
  }
}

.image-with-text__image img {
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius-base);
  margin: 0 auto;
}