hero.css 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. body {
  2. overflow-x: hidden; }
  3. .home .__img-hero {
  4. display: none;
  5. width: 100vw;
  6. position: relative;
  7. left: 50%;
  8. right: 50%;
  9. margin-left: -50vw;
  10. margin-right: -50vw; }
  11. .__img-hero {
  12. height: 300px;
  13. width: 100vw;
  14. position: relative;
  15. left: 50%;
  16. right: 50%;
  17. margin-left: -50vw;
  18. margin-right: -50vw; }
  19. .__img-hero img {
  20. width: 100%;
  21. height: 100%;
  22. object-fit: cover; }
  23. .participant_full {
  24. flex-direction: column;
  25. margin-top: 2rem; }
  26. @media screen and (min-width: 992px) {
  27. .participant_full {
  28. margin-top: 0rem; } }
  29. .participant_full .hero figure {
  30. width: 100%; }
  31. .participant_full .hero figure .__img > div {
  32. margin: auto;
  33. width: 250px;
  34. height: 250px; }
  35. .participant_full .hero figure .__img img {
  36. border-radius: 100%;
  37. width: 100%;
  38. height: 100%;
  39. object-fit: cover; }
  40. .participant_full .hero figure figcaption {
  41. align-self: center;
  42. text-align: center;
  43. margin: 2rem 0; }
  44. @media screen and (min-width: 768px) {
  45. .__img-hero {
  46. height: 500px;
  47. width: auto;
  48. position: relative;
  49. left: 0;
  50. right: 0;
  51. margin-left: auto;
  52. margin-right: auto; } }
  53. @media screen and (min-width: 768px) {
  54. .participant_full .hero figure {
  55. width: 100%; }
  56. .participant_full .hero figure .__img {
  57. margin-right: 2rem; }
  58. .participant_full .hero figure .__img > div {
  59. width: 300px;
  60. height: 300px; }
  61. .participant_full .hero figure .__img img {
  62. border-radius: 100%;
  63. width: 100%;
  64. height: 100%;
  65. object-fit: cover; }
  66. .participant_full .hero figure figcaption {
  67. align-self: center;
  68. text-align: left; } }