.agtw-gallery-wrapper {
  width: 100%;
}

.agtw-main {
  margin-bottom: 12px;
}

.agtw-main-link,
.agtw-main-link:hover,
.agtw-main-link:focus {
  display: block;
  text-decoration: none;
}

.agtw-main-image {
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: #f5f5f5;
}

.agtw-main-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.agtw-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--agtw-columns, 5), minmax(0, 1fr));
  gap: 10px;
}

.agtw-thumb {
  border: 2px solid transparent;
  background: #f5f5f5;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  height: 88px;
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.agtw-thumb:hover,
.agtw-thumb:focus {
  opacity: .9;
  transform: translateY(-1px);
  outline: none;
}

.agtw-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.agtw-thumb.is-active {
  border-color: #111111;
}

.agtw-notice {
  padding: 12px 14px;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  color: #5f4b1f;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .agtw-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agtw-main-image {
    height: 440px;
  }
}

@media (max-width: 767px) {
  .agtw-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .agtw-thumb {
    height: 72px;
  }

  .agtw-main-image {
    height: 320px;
  }
}