1  .mdx-image-section {
  2    display: grid;
  3    border-top: 1px solid rgb(var(--lsd-border-primary));
  4  
  5    .mdx-image-section__video-container {
  6      grid-column: 8 / 17;
  7      position: relative;
  8      width: 100%;
  9      height: 100%;
 10    }
 11  
 12    iframe {
 13      position: absolute;
 14      top: 0;
 15      left: 0;
 16    }
 17  
 18    .mdx-image-section__link {
 19      margin-top: 32px;
 20      width: fit-content;
 21      font-size: 14px;
 22      line-height: 20px;
 23      display: flex;
 24      padding: 10px 40px;
 25      justify-content: center;
 26      align-items: center;
 27      gap: 8px;
 28      border: 1px solid rgb(var(--lsd-border-primary));
 29      text-decoration: none;
 30    }
 31  
 32    .mdx-image-section--align-center {
 33      display: flex;
 34      flex-direction: column;
 35      align-items: center;
 36      max-width: 936px;
 37      margin: auto;
 38  
 39      * {
 40        text-align: center;
 41      }
 42  
 43      .mdx-cta-button {
 44        margin-inline: auto;
 45      }
 46  
 47      .mdx-image-section__description {
 48        margin-top: 24px;
 49      }
 50    }
 51  
 52    .mdx-image-section--align-left {
 53      * {
 54        text-align: left;
 55      }
 56    }
 57  
 58    .mdx-image-section--align-right {
 59      * {
 60        text-align: right;
 61      }
 62  
 63      .mdx-cta-button {
 64        margin-left: auto;
 65      }
 66    }
 67  }
 68  
 69  .mdx-image-section__header {
 70    display: flex;
 71    align-items: center;
 72    gap: 16px;
 73  
 74    button {
 75      padding: 6px 12px !important;
 76      font-size: 12px !important;
 77      line-height: 16px !important;
 78    }
 79  
 80    svg {
 81      width: 26px !important;
 82      height: 26px !important;
 83      path {
 84        fill: rgb(var(--lsd-text-secondary));
 85      }
 86    }
 87  }
 88  
 89  .mdx-image-section--no-border {
 90    border: none !important;
 91  
 92    > * {
 93      border: none !important;
 94    }
 95  }
 96  
 97  .mdx-image-section__description {
 98    margin-top: 1rem;
 99  }
100  
101  .mdx-image-section--title-only {
102    .mdx-image-section__description {
103      max-width: 886px;
104    }
105  }
106  
107  .mdx-image-section--title-button {
108    .mdx-image-section__description {
109      max-width: 886px;
110    }
111  }
112  
113  .mdx-image-section__title {
114  }
115  
116  .mdx-image-section--full-width {
117    .mdx-image-section__container {
118      display: grid;
119      grid-template-columns: repeat(2, 1fr);
120      gap: 0 1rem;
121    }
122  
123    .mdx-image-section__link {
124      grid-area: 2 / 2 / 3 / 3;
125    }
126  }
127  
128  .mdx-image-section--simple {
129    .mdx-image-section__title {
130      margin-top: 1.5rem;
131    }
132  }
133  
134  .mdx-image-section__list-item-link {
135    cursor: pointer;
136  }
137  
138  .mdx-image-section--list {
139    display: grid;
140    grid-template-columns: repeat(16, 1fr);
141    gap: 0 1rem;
142  
143    .mdx-image-section__container {
144      grid-column: 1 / 7;
145    }
146  
147    .mdx-image-section__title {
148      margin-top: 1.5rem;
149    }
150  
151    .mdx-image-section__list {
152      grid-column: 2 / 3;
153  
154      display: flex;
155      flex-direction: column;
156      gap: 1.5rem 0;
157  
158      > * {
159        &:not(:first-child) {
160          border-top: 1px solid rgb(var(--lsd-border-primary));
161        }
162      }
163  
164      & > a {
165        display: block;
166        text-decoration: none;
167      }
168  
169      .mdx-image-section__list-item {
170        > a > .mdx-image-section__item-title {
171          margin-top: 1.5rem;
172          padding: 3px 11px;
173          display: flex;
174          align-items: center;
175          width: fit-content;
176          gap: 12px;
177          border-radius: 1rem;
178          color: rgb(var(--lsd-text-primary));
179          border: 1px solid rgb(var(--lsd-border-primary));
180        }
181  
182        & > a {
183          text-decoration: none;
184        }
185  
186        & > a:hover {
187          text-decoration: underline;
188        }
189  
190        & > .mdx-image-section__item-description {
191          margin-top: 1rem;
192        }
193      }
194    }
195  
196    .mdx-image-section__link {
197    }
198  }
199  
200  @media screen and (max-width: 768px) {
201    .mdx-image-section--list {
202      display: flex;
203      flex-direction: column;
204      gap: 32px;
205    }
206  
207    .mdx-image-section__link {
208      margin-top: 24px !important;
209    }
210  
211    .mdx-image-section__description {
212      margin-top: 24px;
213    }
214  }