Адаптивный код для секции с изображениями и подписями

Вот пример адаптивного кода для секции "Travel" с несколькими фотографиями и описаниями:

Этот код создаст секцию "Travel" с галереей изображений и описаниями, которая будет адаптивной и хорошо выглядеть на разных устройствах. Фотографии и описания можно заменить на свои собственные.

HTML:

<section class="travel-section">
    <div class="container">
      <h2>Travel</h2>
      <div class="travel-gallery">
        <div class="travel-item">
          <img src="/i/1.jpg" alt="Travel Image 1">
          <div class="travel-description">
            <h3>Destination 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="travel-item">
          <img src="/i/2.jpg" alt="Travel Image 2">
          <div class="travel-description">
            <h3>Destination 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="travel-item">
          <img src="/i/3.jpg" alt="Travel Image 3">
          <div class="travel-description">
            <h3>Destination 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

CSS:

.travel-section {
    padding: 50px 0;
    }
    
    .travel-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    
    .travel-item {
    width: calc(33.33% - 20px);
    margin-bottom: 20px;
    }
    
    .travel-item img {
    width: 100%;
    height: auto;
    }
    
    .travel-description {
    background-color: #f2f2f2;
    padding: 10px;
    }
    
    .travel-description h3 {
    margin-top: 0;
    }
    
    @media (max-width: 768px) {
    .travel-item {
        width: calc(50% - 20px);
    }
    }
    
    @media (max-width: 480px) {
    .travel-item {
        width: 100%;
    }
    }

Результат:

Travel

Destination 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Destination 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Destination 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.