
<head>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      header {
        padding: 40px;
      }

      table {
  width: 100%;
}

      table td {
  text-align: center;
  padding: 40px 0;
}
      div {
        font-size: 30px;
        font-family: Helvetica, sans-serif;
      }

      a {
        text-decoration: underline;
        color: #e6c3e8;
        font-family: Helvetica, sans-serif;
        font-size: 14px;
      }

      a:visited {
        color: #e6c3e8;
      }

      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
      
      .photo-container {
        text-align: center; /* Centers the images horizontally */
      }
      /* Styling for the images */
      .photo-container img {
        display: inline-block; /* Makes each image appear on its own line */
        max-width: 80%; /* Ensures images fit within the container */
        height: auto; /* Maintains aspect ratio */
        margin-bottom: 40px; /* Adds space between images */
      }

      .photo-container {
        text-align: center;
      }
      /* Styling for the images */
      .photo-container img {
        display: inline-block; /* Makes each image appear on its own line */
        max-width: 60%; /* Ensures images fit within the container */
        height: auto; /* Maintains aspect ratio */
        margin-bottom: 40px; /* Adds space between images */
      }
      
.img-box {
  position: relative;
  display: inline-block;
}

/* mantém imagem centrada como já tinhas */
.img-box img {
  display: block;
  max-width: 60%;
  height: auto;
  margin: 0 auto;
}

/* texto aos lados */
.text {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0;
  transition: 0.3s ease;

  color: #e6c3e8;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: underline;

  background: transparent;
  padding: 0;
}

/* lado esquerdo */
.img-box .text {
  left: 10px;
}

/* aparece no hover */
.img-box:hover .text {
  opacity: 1;
}
      
* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/happy-line-smiley-94a936df-css.webp') 0 0, auto !important;

@media (max-width: 768px) {

  /* imagens ficam maiores e mais legíveis */
  .photo-container img {
    max-width: 90%;
    margin-bottom: 20px;
  }

  /* garante centragem correta no mobile */
  .img-box {
    text-align: center;
  }

  /* texto aparece sempre no mobile (porque não há hover real) */
  .text {
    opacity: 1;
    position: static;
    transform: none;
    display: block;
    margin-top: 5px;
    text-align: center;
  }

    </style>